用交换机反应路由器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元素。如何在不显式地将HomePage和UserPage包裹在App中或没有将错误页面包裹在App中的情况下使其工作？

Answer 1

当我开始开发“通用React应用”时，第一页的加载是通过服务器端渲染完成的，但是我也遇到了类似的问题，因为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>;
  }
}