React Router 的动态路由
时间: 2024-03-23 11:42:36 浏览: 20
React Router 支持动态路由,可以通过 `/:parameter` 的形式定义动态参数,例如:
```javascript
<Route path='/posts/:id' component={Post} />
```
上述代码中,`/:id` 表示参数 `id` 是动态的,可以匹配所有以 `/posts/` 开头的路径,例如 `/posts/1`、`/posts/2` 等等。
在 `Post` 组件中,可以通过 `this.props.match.params.id` 获取动态参数的值。
```javascript
class Post extends Component {
render () {
const { id } = this.props.match.params
return (
<div>
<h1>Post {id}</h1>
</div>
)
}
}
```
如果需要定义多个动态参数,可以使用多个 `/:parameter`,例如:
```javascript
<Route path='/users/:userId/posts/:postId' component={Post} />
```
上述代码中,`:userId` 和 `:postId` 都是动态参数,可以匹配所有以 `/users/` 开头的路径,并且路径中包含 `posts/`。
在 `Post` 组件中,可以通过 `this.props.match.params.userId` 和 `this.props.match.params.postId` 获取两个动态参数的值。
```javascript
class Post extends Component {
render () {
const { userId, postId } = this.props.match.params
return (
<div>
<h1>Post {postId} by User {userId}</h1>
</div>
)
}
}
```
通过动态路由,可以实现更加灵活的路由控制,适应各种场景的需求。