为什么我的 React 路由器在嵌套交换机中选择两个路由?

Question

My App.js是这样的：

const App = () => {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/studio">
<Studio />
</Route>
<Route path="*" component={NotFound} />
</Switch>
</Router>
</div>
)
}

和我的工作室.js如下：

const Studio = () => {
let { path } = useRouteMatch()
return (
<>
<Switch>
<Route exact path={path}>
<Editor />
</Route>
<Route path={`${path}/categories`}>Studio/Categories</Route>
<Route component={NotFound} />
{/* <Route exact path={`${path}/*`} component={NotFound} /> */}
</Switch>
</>
)
}

似乎路由对于应用程序来说工作得很好.js但对于 Studio.js，Switch 不会在第一场比赛时停止，并且在访问/studio和/studio/categories时呈现<NotFound/>。

如果我没错的话，我该怎么做才能让它在开关中只呈现一个路由，这是根据文档的默认行为？

可重现的沙盒：https://codesandbox.io/s/react-router-nested-glled

Answer 1

你有导入错别字BrowserRouter as Switch，你只需要在嵌套组件中导入常规Switch

import {
BrowserRouter as Switch, // remove `BrowserRouter as` thing
Route,
useRouteMatch
} from "react-router-dom";