ReactRouter Link rendering #/ instead of /

Question

I have the following component which uses ReactRouter:

'use strict'
import React from 'react'
import Container from '../../Elements/Container.jsx'
import Menu from '../../Collections/Menu.jsx'
import Item from '../../Elements/Item.jsx'
import {Link} from 'react-router'

const Sidebar = ( ) => {
    return (
        <Menu className='vertical purple inverted sidebar left'>
        <Item><Link to='/home'>Home</Link></Item>
        <Item><Link to='/roadmap'>Roadmap</Link></Item>
        <Item><Link to='/beta'>Beta</Link></Item>
        <Item><Link to='/about'>Sobre</Link></Item>
    </Menu>
    )
}

export default Sidebar

When I run my app and look at the source, the Link components renders to localhost:3000/#/ and localhost:3000/#/roadmap respectively, instead of localhost:3000/ and localhost:3000/roadmap, which is unintended behavior. What can it be?

Note: I am using isomorphism, and it appears to be related with this unintended behavior. I am getting this on my browser console:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

(client) "><a class="" href="#/" data-reactid=".2
(server) "><a class="" href="/" data-reactid=".27

Note 2: As requested, here are my Router codes:

routes.js

'use strict'
import React from 'react'
import {browserHistory, Router, Route, IndexRedirect} from 'react-router'
import Page from './Page.jsx'
import Home from './Home.jsx'
import Roadmap from './Roadmap.jsx'
import Beta from './Beta.jsx'

const routesA = (
    <Router history={browserHistory>
        <Route path='/' component={Page}>
            <Route path='home' component={Home} />
            <Route path='roadmap' component={Roadmap} />
            <Route path='beta' component={Beta} />
            <Route path='about' component={undefined} />
            <IndexRedirect to='home' />
        </Route>
    </Router>
)

const routesB = {
    path: '/',
    history: browserHistory,
    component: Page,
    indexRedirect: {to: '/home'},
    childRoutes: [
        {path:'/home', component: Home},
        {path:'/roadmap', component: Roadmap},
        {path:'/beta', component: Beta},
        {path:'/about', component: undefined}
    ]
}

export default routesA

Client-side:

'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import routes from './components/Pages/Main/routes.js'

ReactDOM.render(routes, document.getElementById('site'))

Server-side:

'use strict'
import express from 'express'
import React from 'react'
import {renderToString} from 'react-dom/server'
import {RoutingContext, match,browserHistory} from 'react-router'
import createLocation from 'history/lib/createLocation'
import routes from '../app/components/Pages/Main/routes.js'

let server = express()

server.use((request, response) => {
    let l = createLocation(request.url)
    match({routes, location: l}, (error, redirectLocation, renderProps) => {
        if(error)
            response.send(500, error.message)
        else if(redirectLocation)
            response.redirect(302, redirectLocation.pathname + redirectLocation.search)
        else if (renderProps)
            response.render('index', {title: 'Teste', reactOutput: renderToString(<RoutingContext {...renderProps} />)})
        else
            response.send(404, 'Not found!')
    })
})

export default server

Note 3:
I found that if I use routes.js routesA (JSX syntax), the link returns with the hash (#/), but if I use routesB (plain array), the links return as expected (/). How can I do to use JSX syntax and return the right URL?

Answer 1

What version of react-router are you using?

If you are still using 1.0.x check this answer on stackoverflow and this issue ticket on their GitHub.

I happened to encounter this problem as well and found that I was still using 1.0.3 which is the latest version on npm.

However the latest version of react-router on GitHub and docs are for 2.0.x.

You can update your react-router version to beta version (currently 2.0.0-rc4) with the following npm command: npm install --save react-router@beta.