Problems with routes with react router and radium

Question

I'm working on a website on reactJS. I use radium and react router for the routes. I have a lot of problems with routes...

On my main page there is a fixed nav bar menu with a link to the documentation page.

On this documentation page I also have this bar but to access to other links I have to click 2 times to get there..

 class App extends Component {

      render() {
        return (
          <Router history={hashHistory}>
            <Switch>
              <Route exact path="/" component={LandingPage}/>
              <Route path="/documentation" component={DocumentationRoutes}/>
              <Route path="/blog" component={OnContrustion}/>
              <Route path="/contactus" component={OnContrustion}/>
            </Switch>
          </Router>
        );
      }
    }

    export default App;

Here is the DocumentationRoutes:

class DocumentationRoutes extends Component {

  render() {
    return (
      <Router history={hashHistory}>
        <Switch>
          <Route path="/documentation" component={Documentation}/>
          <IndexRoute component={Documentation} />

        </Switch>
      </Router>
    );
  }
}

export default DocumentationRoutes;

and the documentation :

class Documentation extends Component {

  render() {
    return (
    <VerticalLayout>
      <StretchLayout>
        <NavBar />
        </StretchLayout>
        <StretchLayout margin="20">
          <CenterLayout>
            <SubTitle>Documentation</SubTitle>
          </CenterLayout>
          <DocMenu />
        </StretchLayout>
      </VerticalLayout>
    );
  }
}

export default Documentation;

Is it the right way to use react router ? What can I do to be redirected after only one click ? On the first click, the url change correctly but not the page.

Thanks,

Answer 1

You only need to use the Router component in the initial routes definition. Your DocumentationRoutes component should be:

Also in react-router v4 IndexRoute no longer exists.

class DocumentationRoutes extends Component {

  render() {
    return (
        <Switch>
          <Route path="/documentation" component={Documentation}/>
          <Route component={Documentation} />    
        </Switch>
    );
  }
}

export default DocumentationRoutes;