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

前言

这篇文章来记录一下 在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

查看效果：

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