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')
)

文档中指出只有 Route 和 Redirect 元素可以放在 Switch 元素内。我该如何让它正常工作，而不必显式地将 HomePage 和 UserPage 包装在 App 中，或者让错误页面被 App 包装？

- Okinawa Terminal

---

你为什么不把 <Switch> 组件包裹在 <App> 组件中呢？ - Alex Moldovan

App组件包含头部、导航栏和当前路由下的其他内容。但我不希望在404页面中出现头部和导航栏。 - Okinawa Terminal

然后我会使用<Route component={App} />来显示您的应用程序部分，在App内部，您可以在主页和用户页面之间进行路由。这是v4的做法。 - Alex Moldovan

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

- Rahul Sethi

---

关于这个例子：能够到达Err404组件吗？第一个Route匹配所有内容并加载App组件，在这种情况下，Err404组件会被加载吗？它不会检测后续的Switch中是否找不到匹配项，对吗？ - FelixZett

同意。我认为这不会起作用 - Err404组件永远不会呈现。 - Overlook Motel

这看起来是一个潜在的解决方案：https://dev59.com/VVgR5IYBdhLWcg3wUL4J - Overlook Motel

我能在函数组件中使用<Route>和<switch>吗？如何使用？ - Ashish Kamble