在ReactRouter中映射路由

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

问题

在更大的应用程序中，路由很快就会变得重复、冗长和重复。 😉

// 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 中间的一大块文本。 它有效，但看起来不太好。 以前版本的 React Router 将路由表示为对象； 虽然 React Router 4 没有这种语法，但很容易将类似的东西组合在一起。

将路由表示为对象

您可能注意到路线往往采用相同类型的道具。 让我们将它们表示为对象：

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