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