React Router 4 中的 ConnectedRouter 中的多个路由

Question

我有一个要求，我想在不同的路线上呈现不同的组件 所以

• http://localhost/page1 应该渲染第 1 页
• http://localhost/page2 应该渲染 Page2
• http://localhost/page3 应该渲染 Page3
• http://localhost/ 应该渲染动物

为此使用以下配置吗？这是正确的还是社区推荐其他东西用于此？

import {Route, Switch} from 'react-router';
import {ConnectedRouter} from 'react-router-redux';

<ConnectedRouter history={app.history}>
    <div>
        <Route exact path="/page1" component={Page1} />
        <Route exact path="/page2" component={Page2} />
        <Route exact path="/page3" component={Page3} />
        <Route exact path="/:animal?" component={Animal} />
    </div>
</ConnectedRouter>

Answer 1

您可能希望使用索引路由，而不是确切的路径，因为将来您可能需要添加子路由。因此，保持 App 与其他路径解耦并让路由配置决定渲染为子级的内容是一个好习惯。（以防您将来有这种情况）

请记住，我们希望在小应用中构建小应用，而不是大应用！

  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={some_component}></IndexRoute>
    </Route>
    <Route path="/xyz" component={App}>
      <IndexRoute component={xyz}></IndexRoute>
    </Route>
    <Route path="/abc" component={App}>
      <IndexRoute component= {abc}></IndexRoute>
    </Route>
    <Route path="/*" component={NotFound} />
  </Router>, document.getElementById('app')
);

希望这会有所帮助。