javascript - React Router v4 带 Switch 的嵌套路由

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

虽然我已经开始开发一个“通用 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>;
  }
}