CODEWITHSUNDEEP
node.jsexpressreactjsreact-routerbabeljs
Marcos Cassiano
Marcos Cassiano

Reputation: 847

Can't get React Router to work with this simple example

I've tried as much as possible to do the same as in these react-router examples but didn't get it working.

I have this code:

In server.js:

var express = require('express');

var app = express();

app.use(express.static(__dirname));

app.listen(5000, function () {
    console.log('Server listening on http://localhost:5000, Ctrl+C to stop')
});

In index.html:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Routing</title>
    </head>
    <body>

        <script src="dist/js/main.js"></script>
    </body>
</html>

And in main.js ("browserified" and transformed with "babelify"):

import React from 'react'
import { createHistory, useBasename } from 'history'
import { Router, Route, Link } from 'react-router'

import Navbar from './components/Navbar'
import Main from './components/Main'

const history = useBasename(createHistory)({
    basename: '/'
});

const App = React.createClass({
    render ()
    {
        return (
            <div>
                <Navbar description="Testando..." />
                <Link to="/main">Go to main</Link>
            </div>
        )
    }
});

React.render((
    <Router history={history}>
        <Route path='/' component={App}>
            <Route path='/main' component={Main} />
        </Route>
    </Router>
),
document.body);

And when I click in link Go to Main, I get this error: Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://main/' cannot be created in a document with origin 'http://localhost:5000'.

What's wrong?

P.S.: I'm using React version 0.13.3 and react-router version 1.0.0-rc1

EDIT - 10/09/2015 (after @knowbody 's answer)

I've changed my server.js to:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 5000
const app = express()

// serve static assets normally
app.use(express.static(__dirname))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

EDIT - 10/10/2015

Updated index.html from

<script src="dist/js/main.js"></script>

to

<script src="/dist/js/main.js"></script>

because I was having problem with URLs with two segments.

Upvotes: 0

Views: 1968

Answers (1)

knowbody
knowbody

Reputation: 8276

You don't need to use useBasename. Instead just use:

let history = createHistory()

This will allow you to use BrowserHistory.

Upvotes: 1

Related Questions