CODEWITHSUNDEEP
reactjsreact-routerbrowserify
SyndicatorBBB
SyndicatorBBB

Reputation: 1807

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

Upvotes: 0

Views: 1454

Answers (2)

ant1
ant1

Reputation: 301

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.

Upvotes: 1

Pixelomo
Pixelomo

Reputation: 6737

Use the Match and Miss methods from react-router. Match allows you set rules of the exact component you want to route to and Miss sets the destination if the routing 404's:

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter, Match, Miss} from 'react-router';
import NotFound from './components/NotFound';

const Root = () => {
    return(
        <BrowserRouter>
            <div>
                <Match exactly pattern="/" component={App} />
                <Match exactly pattern="/authors" component={AuthorPage}/>
                <Miss component={NotFound} />
            </div>
        </BrowserRouter>
    )
}

render(<Root/>, document.querySelector('#main'));

Upvotes: 0

Related Questions