在组件中与路由器分开时，React路由器的交换机不起作用

Question

为了模块化，我试图将Router和Switch组件分成两个不同的文件，但是它不起作用，并且错误似乎也没有意义。

主文件App.jsx呈现如下内容：

<Router>
    <div>
        <Nav />
        <AppRouter />
    </div>
</Router>

您会注意到路由器仅包含1个孩子，即一个div。

AppRouter呈现如下内容：

<Switch>
    <Route path="/" exact component={Home} />
    <Route path="/list" exact component={List} />
    <Route component={NotFound} />
</Switch>

Nav仅包含Link个列表：

<Link to="/">Home</Link>

据我所知，由于Router仅包含一个孩子，并且由于Switch应该与多个孩子一起工作，因此该代码应该没问题。

但是此代码失败：

Uncaught Error: A <Router> may have only one child element

You can use a live example here.

---

我还注意到了一个奇怪的行为：当我删除一些Route时，只剩下1个Route，就没有更多错误了，但是导航不再起作用了（它改变了URL，仅此而已。）

---

那里发生了什么以及如何修复我的代码？

Answer 1

您必须像在import { Switch, Route } from "react-router-dom";中的AppRouter.jsx一样导入 Switch 。

您无法导入BrowserRouter as Switch