React Routerのチュートリアル Lesson7
前回の続き。
Lesson7 - More Nesting
今回は、前回追加したパラメータ付きリンクのクリック時の挙動を、ちょっとだけ変更します。 リンクをクリックすると、その下にリンクしたリポジトリ名を表示するようにします。
ネストを変更する
Reposの子要素にRepoを配置します。
... (snip) ...
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo} />
</Route>
... (snip) ...
子要素をリンクの下に描画する
this.props.childrenで、Reposの子要素を描画します。
ついでに、LinkをNavLinkに置き換えて、リンクのアクティブな状態がわかるように変更します。
class Repos extends React.Component {
render() {
return (
<div>
<h2>Repos</h2>
<ul>
<li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
<li><NavLink to="/repos/facebook/react">Facebook</NavLink></li>
</ul>
{ this.props.children }
</div>
);
}
}
export default Repos;
まとめ
特になし。
