다른 구성 요소의 Re-Router-4 라우팅

Question

다른 구성 요소의 구성 요소를 라우팅 할 수 있습니까?

그래서 정상적으로는 같이 할 것이다 아래

<NavLink to="/link">link</NavLink> 
<NavLink to="/anotherLink">link </NavLink> 
<Switch> 
    <Route exact path="/link" component={linkComponent}/> 
    <Route path="/anotherLink" component={anotherLinkComponent}/> 
</Switch> 

있지만 주요 구성 요소의 주요 구성 요소에서 다음 경로에로드 한 구성 요소에 NavLink을 가질 수 있습니다? 따라서 한 구성 요소에 NavLink이 있고 주 구성 요소에 Route이 있습니다.

순자산 가치 (NAV) 구성 요소

export default class Nav extends Component { 
    render() { 
     return (
      <nav className="navigation"> 
       <ul className="nav-container"> 
        <li> 
         <NavLink to="/" className="nav-title"> 
          First Page 
         </NavLink> 
        </li> 
        <li> 
         <NavLink to="second-page" className="nav-title"> 
          Second Page 
         </NavLink> 
        </li> 
        <li> 
         <NavLink to="third-page" className="nav-title"> 
          Third Page 
         </NavLink> 
        </li> 
       </ul> 
       <div className="nav-decoration"> 

       </div> 
      </nav> 
     ) 
    } 
} 

앱 구성 요소

import Nav from 'whateverthepath'; 

export default class App extends Component { 

    render() { 
     return (
      <div> 
       <Nav/> 
       <Switch> 
        <Route exact path="/" component={Firstpage}/> 
        <Route path="/secondpage" component={Secondpage}/> 

       </Switch> 
      </div> 
     ) 
    } 
} 

모든 적절한 반응 수입은

확실히 가능

Answer 1

을 완료하고 같이 귀하의 예제도 작동합니다. 가장 확실한 것은 여러분의 <Route>이 어떤 지점으로 렌더링 된 것입니다. 귀하의 예제가 작동하는 이유는 귀하가 <Switch> 문과 동일한 render() 메소드에서 <Nav>을 렌더링하기 때문입니다. 대신 switch 문을 렌더링하지 않고 <Nav>을 렌더링하면 NavLinks는 당신에게 React Router가 알려지지 않은 곳으로 데려다 줄 것입니다. 일반적으로 귀하의 <Route>이 항상 가장 상위 컴포넌트에있어 렌더링되는지 확인하는 것이 일반적입니다.