反応ルータとラジウムのルートに関する問題

Question

私はreactJSのウェブサイトで作業しています。私はラジウムを使用し、ルートのためのルータを反応させる。 私はルートに多くの問題があります...

私のメインページには、マニュアルページへのリンク付きの固定ナビゲーションバーメニューがあります。

私も、このバーを持っているが、私はそこに2回クリックする必要が他のリンクにアクセスするには、このドキュメントのページ

..

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; 

ここではDocumentationRoutesです：

class DocumentationRoutes extends Component { 

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

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

export default DocumentationRoutes; 

とドキュメント：

class Documentation extends Component { 

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

export default Documentation; 

反応ルータを使用するのは正しい方法ですか？ 1回のクリックでリダイレクトできるのは何ですか？ 最初のクリックでは、URLは正しく変更されますが、ページは変更されません。

おかげで、

Answer 1

あなただけの最初のルート定義にRouterコンポーネントを使用する必要があります。あなたのDocumentationRoutesコンポーネントは、

である必要があります。react-router v4 IndexRouteも存在しません。

class DocumentationRoutes extends Component { 

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

export default DocumentationRoutes;