SyndicatorBBB SyndicatorBBB - 9 days ago 5
React JSX Question

React Router navigation doesn't change the page/component

I'm using the latest version of react-router (^3.0.0).

I'm trying to create a simple navigation and I'm having trouble to change the component displayed by relation to the url path.

This is my simple routing code:

ReactDom.render(
<Router history={browserHistory}>
{routes}
</Router>,
document.getElementById('app')
);


and this is my routes variable:

var routes = (
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="authors" component={AuthorPage} />
</Route>

);


When I navigate to http://localhost:9005/#/authors I still get the App component displayed. I know that my routing does recognize the authors path because if I enter a wrong path (say authors1) then I get an error that the path doesn't exists. I tried using both browserHistory and hashHistory.

So assuming that my routing does recognize the authors path, why it doesn't change the page content according to the authors component?

Thank you

Answer

May be the only problem is that you forgot a slash before authors ("/authors")

ReactDom.render(
    <Router history={browserHistory}>
       <Route path="/" component={App}>
           <IndexRoute component={Home} />
           <Route path="/authors" component={AuthorPage} />
      </Route>    
    </Router>,
    document.getElementById('app')
);

Hope that helps.