使用Switch实现路由器v4嵌套路由

Question

尝试执行以下操作,但它无法正常工作.

ReactDOM.render(
  <Router>
    <div className="route-wrapper">
      <Switch>
        <App>
          <Route exact path="/" component={HomePage} />
          <Route path="/user" component={UserPage} />
        </App>
        <Route component={Err404} />
      </Switch>
    </div>
  </Router>,
  document.getElementById('main')
)

正如文档所述,在Switch元素中只允许使用Route和Redirect元素.如果没有在App中明确地包装HomePage和UserPage或者App包含错误页面,我如何才能使用它？

Answer 1

虽然我已经开始开发一个"Universal React app",其中第一页加载是通过服务器端渲染完成的,但我遇到了类似的问题,因为React-Router刚刚更新到4.0.你应该考虑重组你的应用程序,如下所示:

ReactDOM.render(
  <Router>
    <div className="route-wrapper">
      <Switch>
        <Route path="/" component={App} />
        <Route component={Err404} />
      </Switch>
    </div>
  </Router>,
  document.getElementById('main')
)

App组件的重构如下:

class App extends React.Component {
  render() {
    return <div>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/user" component={UserPage} />
      </Switch>
    </div>;
  }
}