react如何在路由中使用路由,且不使用第一个路由的路径
时间: 2023-08-23 12:18:10 浏览: 85
React Router可以使用嵌套路由来实现在路由中使用路由。嵌套路由是指在一个路由中再嵌套一个或多个路由的方式,这样可以更好地组织和管理路由。
例如,我们可以使用以下代码来创建一个嵌套路由:
```
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/items" component={Items} />
</Switch>
</Router>
);
}
function Items() {
return (
<div>
<h2>Items</h2>
<Switch>
<Route path="/items/:id" component={ItemDetail} />
<Route path="/items" component={ItemList} />
</Switch>
</div>
);
}
```
在这个例子中,我们有一个名为`Items`的组件,它包含了两个嵌套的路由。第一个路由`/items/:id`用于显示具体的物品详情,第二个路由`/items`用于显示所有物品的列表。注意到在`Items`组件中我们没有使用`exact`属性,这是因为我们希望`/items/:id`路由也能够匹配到`/items`路径。
这样,当我们访问`/items`路径时,会显示`ItemList`组件,而当我们访问`/items/:id`路径时,会显示`ItemDetail`组件。同时,这两个路由都是在`/items`路径下的,不会与`/`路径产生冲突。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)