Reactルーターでのルートのマッピング

投稿日: 2022-04-20 2022-10-09
タグ: React

場合によっては、ルートをコンポーネントではなくオブジェクトとして保存すると便利なことがあります。

問題

大規模なアプリケーションでは、ルートはすぐに反復的、冗長、反復的になります。 😉

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

getdocs

13036