반응 라우터와 라듐이있는 경로 문제

Question

나는 reactJS 웹 사이트에서 일하고 있습니다. 나는 라듐을 사용하고 라우트를 위해 라우터를 반응시킨다. 경로에 많은 문제가 있습니다 ...

내 메인 페이지에는 문서 페이지 링크가있는 고정 된 탐색 메뉴가 있습니다.

class DocumentationRoutes extends Component { 

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

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

export default DocumentationRoutes; 

과 : 나는이 막대하지만 거기까지 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 Documentation extends Component { 

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

export default Documentation; 

반응 라우터를 사용하는 것이 올바른 방법입니까? 클릭 한 번으로 리디렉션하려면 어떻게해야합니까? 첫 번째 클릭에서 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;