別のコンポーネントからコンポーネントをルーティングすることは可能ですか?別のコンポーネントからの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>
)
}
}
すべての適切な輸入品は間違いなく可能です
リンクの宛先に一致するルートが表示されているレンダリングされた階層内にある限り、ルーターはそれをレンダリングします。あなたの例はうまくいくはずです。 'Router'の中に' App'をラップして試してみる必要があります。 – hazardous