2017-04-06 21 views
0

別のコンポーネントからコンポーネントをルーティングすることは可能ですか?別のコンポーネントからのReact-Router-4ルーティング

だから、通常はそれが

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

以下のように行われるだろうが、それは主成分からのルートメインコンポーネントにロードされている一つの成分でNavLinkを持つことは可能でしょうか?したがって、1つのコンポーネントにNavLinkがあり、メインコンポーネントにRouteがあります。

ナビゲーションコンポーネント

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> 
     ) 
    } 
} 

すべての適切な輸入品は間違いなく可能です

+0

リンクの宛先に一致するルートが表示されているレンダリングされた階層内にある限り、ルーターはそれをレンダリングします。あなたの例はうまくいくはずです。 'Router'の中に' App'をラップして試してみる必要があります。 – hazardous

答えて

0

をやっているし、あなたの例でもあるように動作するはずです反応します。あなたが確認する必要がある最大のことは、あなたの<Route>がある点としてレンダリングされたことです。あなたの例が動作する理由は、ステートメントと同じrender()メソッドで<Nav>をレンダリングするためです。代わりに<Nav>をswitch文をレンダリングせずにレンダリングするだけなら、NavLinksはReact Routerが通知されていないところにあなたを連れて行くでしょう。これは、通常、あなたの<Route>がほとんどの親コンポーネントにあり、レンダリングされているかどうかを確認するためです。

関連する問題