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>;
  }
}

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

1 个答案: