在 React 路由器中映射路由

在某些情况下,将路径存储为对象而不是组件可能是有益的。

问题

在更大的应用程序中,路径很快会被重复,说话和重复。

 1// App.js
 2class App extends Component {
 3  render() {
 4    return (
 5      <BrowserRouter>
 6        <div>
 7          <Route exact path="/" component={HomePage} />
 8          <Route exact path="/Teachers" component={TeacherListPage} />
 9          <Route exact path="/Teachers/:teacherId" component={TeacherPage} />
10          <Route exact path="/Teachers/:teacherId/Classes" component={TaughtClassesPage} />
11        {/* And on and on for classes, grades, students, et cetera. */}
12        </div>
13      </BrowserRouter>
14    );
15  }
16}

它工作,但它看起来不太好. React Router 的以前版本代表了路径作为对象;虽然与 React Router 4 消失了这种语法,但可以很容易地将类似的东西扔在一起。

将路线作为物体

您可能注意到路线往往采用相同类型的附件,让我们把它们描述为对象:

 1// You can declare this in `App.js`, but it might
 2// be better to move it to its own file.
 3
 4const routes = [{
 5  path: '/',
 6  component: HomePage,
 7}, {
 8  path: '/Teachers',
 9  component: TeacherListPage,
10}, {
11  path: '/Teachers/:teacherId',
12  component: TeacherPage,
13}, {
14  path: '/Teachers/:teacherId/Classes',
15  component: TaughtClassesPage,
16}, /* And so on. */];

使用此对象,您可以简化应用程序:

 1class App extends Component {
 2  render() {
 3    const routeComponents = routes.map(({path, component}, key) => <Route exact path={path} component={component} key={key} />);
 4    return (
 5      <BrowserRouter>
 6        {routeComponents}
 7        </div>
 8      </BrowserRouter>
 9    );
10  }
11}