react中router路由传参和路由的集中管理

最新推荐文章于 2023-08-25 20:21:07 发布

Beiyux

最新推荐文章于 2023-08-25 20:21:07 发布

阅读量1.7k

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45745641/article/details/123747954

版权

本文探讨了在React中如何进行路由参数传递，包括使用`:id`、路由拼接和对象形式，并介绍了如何通过react-router-config实现路由的集中管理和子路由配置。详细展示了不同传参方法的代码示例及效果。

摘要由CSDN通过智能技术生成

文章目录

前言

这篇文章来记录一下在react路由中如何进行路由传参，还有如何进行路由的集中管理

路由传参

1.使用:id进行传参：

<BrowserRouter>
    <ul>
        <li><Link to='/user/:id'>用户中心</Link></li>
        <li><Link to='/userinfo'>用户信息</Link></li>
        <li><Link to='/userdetail'>用户详情</Link></li>
    </ul>
    <Switch>
        <Route path='/user/:id' exact component={
   User} />
        <Route path='/userinfo' component={
   UserInfo} />
        <Route path='/userdetail' component={
   UserDetail} />
    </Switch>
</BrowserRouter>

使用props渲染id

class User extends Component {
   
    render() {
   
        console.log(this.props)
        return (
            <div>
                <h1>用户中心</h1>
                <p>{
   this.props.match.params.id}</p>
            </div>
        )
    }
}

看效果：

在这里插入图片描述

2.路由拼接参数传参

注意看用户信息外面包裹的link标签

<BrowserRouter>
    <ul>
        <li><Link to='/user/:id'>用户中心</Link></li>
        <li><Link to='/userinfo?name=weiwei&age=18'>用户信息</Link></li>
        <li><Link to