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

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

前言

这篇文章来记录一下 在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='/userdetail'>用户详情</Link></li>
    </ul>
    <Switch>
        <Route path='/user/:id' exact component={User} />
        <Route path='/userinfo' component={UserInfo} />
        <Route path='/userdetail' component={UserDetail} />
    </Switch>
</BrowserRouter>

使用querystring解析url传参的值,使用querystring之前要进行安装和引入

class UserInfo extends Component {
    render() {
        console.log(querystring.parse(this.props.location.search))
        let {name, age} = querystring.parse(this.props.location.search)
        return (
            <div>用户信息
                <h2>用户姓名:{name}</h2>
                <h2>用户年龄:{age}</h2>
            </div>
        )
    }
}

查看效果:
在这里插入图片描述

3.对象形式传参

这种方法比较推荐,不会暴露参数而且可以传很多值比较方便
注意看用户详情的link,直接在里面写对象,pathname写地址,state内传对象参数

<BrowserRouter>
    <ul>
        <li><Link to='/user/:id'>用户中心</Link></li>
        <li><Link to='/userinfo?name=weiwei&age=18'>用户信息</Link></li>
        <li><Link to={
            {
                pathname: '/userdetail', // 跳转的路径
                // search: 'name=hello-world'
                state: {name: 'hahaha', age: 12}
            }
        }>用户详情</Link></li>
    </ul>
    <Switch>
        <Route path='/user/:id' exact component={User} />
        <Route path='/userinfo' component={UserInfo} />
        <Route path='/userdetail' component={UserDetail} />
    </Switch>
</BrowserRouter>
class UserDetail extends Component {
    render() {
        console.log(this.props)
        let {name, age} = this.props.location.state
        return (
            <div>用户详情
                <h2>用户姓名:{name}</h2>
                <h2>用户年龄:{age}</h2>
            </div>
        )
    }
}

看效果:
在这里插入图片描述

路由集中管理

学习中我们会发现react中路由比较分散,那么有没有办法对路由进行集中管理呢?
这里需要使用到路由管理器react-router-config,用之前需要安装
然后进行导入就可以使用啦,{renderRoutes(routes)}

import React, { Component } from 'react'
import {BrowserRouter, Link} from 'react-router-dom'
import routes from './07router'
import {renderRoutes} from 'react-router-config'

export class App extends Component {
  render() {
    return (
      <div>
          <BrowserRouter>
            <ul>
                <li><Link to='/'>主页</Link></li>
                <li><Link to='/about'>关于</Link></li>
                <li><Link to='/user'>用户中心</Link></li>
            </ul>

            {renderRoutes(routes)}
          </BrowserRouter>
      </div>
    )
  }
}

export default App

新建一个文件进行路由的相关配置:

import Home from '../01pages/home'
import About from '../01pages/about'
import User from '../01pages/user'

const routes = [
    {
        path: '/',
        exact: true,
        component: Home
    },
    {
        path: '/home',
        exact: true,
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user',
        component: User
    }
]

export default routes

这样就可以实现了集中处理路由

路由集中管理之子路由

如果想实现路由包含子路由,怎么实现
看下面

import React, { Component } from 'react'
import {BrowserRouter, Link} from 'react-router-dom'
import routes from './08router'
import {renderRoutes} from 'react-router-config'

export class App extends Component {
  render() {
    return (
      <div>
          <BrowserRouter>
            <ul>
                <li><Link to='/'>主页</Link></li>
                <li><Link to='/about'>关于</Link></li>
                <li><Link to='/about/son'>关于儿子</Link></li>
                <li><Link to='/user'>用户中心</Link></li>
            </ul>

            {renderRoutes(routes)}
          </BrowserRouter>
      </div>
    )
  }
}

export default App

这里还需要新建一个文件写son的内容:

import React, { Component } from 'react'

export class Son extends Component {
  render() {
    return (
      <div>我是关于的Son</div>
    )
  }
}

export default Son

同样的新建文件进行集中管理,子路由就在routes:里面再包一层,看下面的about

// 在这里进行路由的相关配置
import Home from '../01pages/home'
import About from '../01pages/about'
import User from '../01pages/user'
import Son from './son'

const routes = [
    {
        path: '/',
        exact: true,
        component: Home
    },
    {
        path: '/home',
        exact: true,
        component: Home
    },
    
    {
        path: '/about',
        component: About,
        routes: [
            {
                path: '/about/son',
                exact: true,
                component: Son
            }
        ]
    },
    {
        path: '/user',
        component: User
    }
]

export default routes

查看效果:
在这里插入图片描述

好了,本篇文章到这里结束了,如果对你有帮助,可以点赞关注支持一下~~
后续我还会带来更多前端知识内容

相关文章
|
12天前
|
前端开发 JavaScript
React和Vue实现路由懒加载
React和Vue实现路由懒加载
39 2
|
12天前
|
存储 前端开发 JavaScript
react怎么实现跨页面传参
react怎么实现跨页面传参
64 2
|
12天前
|
前端开发
如何使用react-router v6快速搭建路由?
如何使用react-router v6快速搭建路由?
61 0
|
12天前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
54 1
|
12天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
54 0
|
12天前
|
前端开发
【掰开揉碎】React Router——React应用导航(二)
【掰开揉碎】React Router——React应用导航(二)
|
12天前
|
资源调度 前端开发 网络架构
【掰开揉碎】React Router——React应用导航(一)
【掰开揉碎】React Router——React应用导航(一)
|
12天前
|
前端开发 中间件 数据安全/隐私保护
React路由进阶方法
React路由进阶方法
31 1
|
12天前
|
前端开发 JavaScript API
介绍一下React Router的工作原理。
介绍一下React Router的工作原理。
38 5
|
12天前
|
JavaScript 前端开发 网络安全
vue与react路由拦截
vue与react路由拦截
38 4

热门文章

最新文章