Probleme mit Routen mit reagieren Router und Radium

Question

Ich arbeite auf einer Website auf reactJS. Ich benutze Radium und reagiere Router für die Routen. Ich habe viele Probleme mit Routen ...

Auf meiner Hauptseite gibt es ein festes Navigationsleistenmenü mit einem Link zur Dokumentationsseite.

Auf dieser Dokumentation Seite ich diese Bar auch aber den Zugang zu anderen Verbindungen habe Ich habe 2 mal klicken um dorthin zu gelangen ..

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; 

Hier ist der DocumentationRoutes:

class DocumentationRoutes extends Component { 

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

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

export default DocumentationRoutes; 

und die Dokumentation:

class Documentation extends Component { 

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

export default Documentation; 

Ist es der richtige Weg, um zu reagieren Router? Was kann ich tun, um nach nur einem Klick umgeleitet zu werden? Beim ersten Klick ändert sich die URL korrekt, aber nicht die Seite.

Danke,

Answer 1

Sie müssen nur die Router Komponente in der ursprünglichen Routen Definition verwenden. Ihre DocumentationRoutes Komponente sollte sein:

Auch in react-router v4 IndexRoute existiert nicht mehr.

class DocumentationRoutes extends Component { 

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

export default DocumentationRoutes;