Reactルーターでのルートのマッピング
提供:Dev Guides
場合によっては、ルートをコンポーネントではなくオブジェクトとして保存すると便利なことがあります。
問題
大規模なアプリケーションでは、ルートはすぐに反復的、冗長、反復的になります。 😉
// App.js class App extends Component { render() { return ( <BrowserRouter> <div> <Route exact path="/" component={HomePage} /> <Route exact path="/Teachers" component={TeacherListPage} /> <Route exact path="/Teachers/:teacherId" component={TeacherPage} /> <Route exact path="/Teachers/:teacherId/Classes" component={TaughtClassesPage} /> {/* And on and on for classes, grades, students, et cetera. */} </div> </BrowserRouter> ); } }
render
の真ん中にある巨大なテキストです。 動作しますが、見た目はあまり良くありません。 以前のバージョンのReactRouterは、ルートをオブジェクトとして表していました。 その構文はReactRouter4ではなくなりましたが、似たようなものをまとめるのは非常に簡単です。
ルートをオブジェクトとして表す
あなたはおそらく、ルートが同じ種類の小道具をとる傾向があることに気づいたでしょう。 それらをオブジェクトとして表現しましょう。
// You can declare this in `App.js`, but it might // be better to move it to its own file. const routes = [{ path: '/', component: HomePage, }, { path: '/Teachers', component: TeacherListPage, }, { path: '/Teachers/:teacherId', component: TeacherPage, }, { path: '/Teachers/:teacherId/Classes', component: TaughtClassesPage, }, /* And so on. */];
このオブジェクトを使用すると、App
を簡略化できます。
class App extends Component { render() { const routeComponents = routes.map(({path, component}, key) => <Route exact path={path} component={component} key={key} />); return ( <BrowserRouter> {routeComponents} </div> </BrowserRouter> ); } }