哇！不是吧？React中路径传参居然是这样

前言

在项目中配置路由是极其重要的一项环节，如何使用路由配置所需要的路径呢，就来看看文章吧

react 路由基本使用

1.安装react-router-dom，在入口文件index.js中引入HasRouter组件，并将要使用的到路由的组件进行包裹

2.在子组件中引入Link，RouteLink用来配置路由的跳转路径 to属性设置跳转的路由地址

3.Route用来设置展示的组件component用于设置匹配的路径展示的组件path设置匹配的路径exact 属性用于让Router中的path与Link中的to完全匹配

4.Switch标签的作用是将包裹在其中的Router中path重复的进行剔除，只留下唯一的Router包裹的必须直接是route标签的元素

代码如下

import './App.scss'
import Layout from '@/pages/Layout/Layout'
import Login from '@/pages/Login/Login'
import Edit from '@/pages/Profile/Edit'
import 'antd/dist/antd.css' // or 'antd/dist/antd.less'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
function App () {
  return (
    <Router>
    <div className="app">
    <Route path="/" exact render={() => <Redirect to="/home"></Redirect> }></Route>
    <Route path="/home"><Layout /></Route>
    <Route path="/login"><Login /></Route>
    {/* <Route path="/profile/edit"><Edit /></Route> */}
    </div>
    </Router>

  )
}

export default App

路由参数传递

• 需要路由参数占位符，:id
• 触发操作的时候传递具体的参数
• 在具体的组件中使用传递的参数
• 首先要在路由内配置匹配规则Route
• 相关路径的组件需要内部配置Link规则
• 通过props.match.params获取传入的数据对象

import React, {Component} from 'react'
import {Link} from 'react-router-dom'

class Nav extends Component {
    render () {
        return (
            <>
                <p><Link excat to='/detail/1'>文章1</Link></p>
                <p><Link excat to='/detail/2'>文章2</Link></p>
                <p><Link excat to='/detail/3'>文章3</Link></p>
            </>
        )
    }
}

export default Nav
// detail  获取传入的数据

import React, {Component} from 'react'

class Detail extends Component {
    render () {
        return (
            <>
                {this.props.match.params.id}
            </>
        )
    }
}

export default Detail
// app  根组件
...
        <Switch>
          ...
          <Route exact component={Detail} path='/detail/:id'></Route>
        </Switch>
...

现在有一个需求

退出账号将退出时的路径记录下来，再次登陆账号跳转至退出时之前的路径

思路：利用useDispatch 的第二个参数记录路径

在退出时按钮触发一个点击事件

onClick: () => {
              history.replace('/login', { from: history.location.pathname })
              Toast.show({ content: '退出成功' })
            }

在登陆时触发

onClick: () => {
  const path = history.location.state?.from || '/'
          history.replace(path)
         ｝

路由嵌套

• 在路由组件内部书写新的路由规则和渲染的组件
• 通过props.match.url和props.match.path可以分别动态的获取上一级的路由Link的to路径和Route的path路径，避免了修改父路由而引发的路径错误
• 父组件一定要去除excat属性

import React, {Component} from 'react'
import {Link, Route} from 'react-router-dom'
import Inner from './inner'
import Outer from './outer'

class Nav extends Component {
    render () {
        return (
            <>
                <p><Link to='/nav/1'>文章1</Link></p>
                <p><Link to='/nav/2'>文章2</Link></p>
                <p><Link to='/nav/3?title="张三"'>文章3</Link></p>
                <div>
                    <div>
                        {console.log(this.props)}
                        <Link to={`${this.props.match.url}/inner`}>inner</Link>
                        <Link to={`${this.props.match.url}/outer`}>outer</Link>
                    </div>  
                    <div>
                        <Route path={`${this.props.match.path}/inner`} component={Inner} />
                        <Route path={`${this.props.match.path}/outer`} component={Outer} />
                    </div>
                </div>
            </>
        )
    }
}

export default Nav

重定向

• 从react-router-dom中引入Redirect组件，属性to为跳转到的路由路径
• 可以通过判断来进行路由的跳转

<Route path="/" exact render={() => <Redirect to="/home"></Redirect> }></Route>