嵌套路由在react js不正确工作?

Question

这是一个App组件

...
<BrowserRouter>
<Switch>
<Route  path = '/shop' component = {Shop}  />  
</Switch>
</BrowserRouter>
...

，这是一个Shop组件

...
const {url , path} = useRouteMatch()
return (
<>
<Route path = {`${path}/two`}  >
<Two/> 
</Route>
<div>   
<Link to = {`${url}/two`}>nested</Link>
</div>
</>
...

问题是当我在

下面使用exact like时

<Route exact path = '/shop' component = {Shop}  />

URL将正确更改，但<Two/>组件将不呈现有人有什么想法吗?

Answer 1

您缺少将Route组件包裹在Switch组件内:

<<p>商店组件/strong>

<>
<Switch>
<Route path = {`${path}/two`}  >
<Two/> 
</Route>
</Switch>
<div>   
<Link to = {`${url}/two`}>nested</Link>
</div>
</>