Question

我有要求我想在不同的路由上呈现不同的组件所以

http://localhost/page1应该呈现Page1
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')
);

希望这有帮助。

React Router 4中ConnectedRouter中的多条路由

1 个答案: