1

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?

5
  • 2
    Can you show the code where the router is declared? Link gets the url format based on the history used. Commented Jan 5, 2016 at 1:33
  • @JoshDavidMiller: Edited to insert the code requested. Note that on client-side I use browserHistory, but server-side doesn't support it. So I had to use createHistory. Anyway, I don't know how history works. Commented Jan 5, 2016 at 10:19
  • Is there a reason you have two different router definitions? Why isn't the server rendering the Site component too? Commented Jan 5, 2016 at 22:30
  • No reason. But It seems that server can't render Site for it uses browserHistory. Commented Jan 6, 2016 at 8:28
  • @JoshDavidMiller: I edited the post a lot. I am using now only one Router, and found that using JSX syntax returns with hash, and using plain array syntax returns as expected. Re-read the post for more info. Commented Jan 6, 2016 at 14:13

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Indeed, my react-router is at 1.0.3. There's any way I can force it to update or I have to do it manually?
Did some research. It seems you have to pull all the code from GitHub manually. Currently there is no way to download 2.0.x version from npm since they have't upload it yet.
I found that I cand do the update with the command npm install --save react-router@beta. Now I am having a problem with my routing. If I solve this I will vote your answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.