react-router的params/search/state传参方式(对比React-Router4/5/6)

一.react路由跳转和传参方式-React-Router4/5

1.params参数方式

(1)标签路由链接跳转方式:
Home组件的render配置prams携带参数方式
//路由链接
<MyNavLink to={`/detail/${item.id}/${item.title}`}>二级路由{item.title}</MyNavLink>
(2)编程式导航方式：
 this.props.history.replace(`/home/message/detail/${id}/${title}`)

//路由注册
<Route path="/detail/:id/:title" component={Detail}/>

params接收参数方式-detail组件中render
//detail页面接收参数方式 
 const {id,title} = this.props.match.params

2.search参数方式

  //search传参方式 /detail?name=张三&age=20格式
   //引入
   import qs from 'qs'
   
   jsx部分
   (1)标签路由链接跳转方式:
   //路由链接
   <MyNavLink to={`/home/message/detail?id=${item.id}&title=${item.title}`}>二级路由{item.title}</MyNavLink>
   
   (2)编程式导航方式：
  this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

   //路由注册
   <Route path="/home/message/detail" component={Detail}/>
   
   // detail页面接收方式-search接收参数 - 
    // search接收参数
      //旧的方式
      // import qs from 'querystring'
      //新的方式
      import qs from 'qs'

      //qs提供
      //转为字符串 urlencode
      const obj = {name:'张三',age:445};
      console.log(qs.stringify(obj));

      //转为对象
      const str = 'name=张三&age=20';
      console.log(qs.parse(str))

      const {id,title} = qs.parse(this.props.location.search.slice(1))

3.使用state方式

 state优点路径不显示参数

 (1)标签路由链接跳转方式:
  路由链接
   <MyNavLink to={{pathname:`/home/message/detail`,state:{id:item.id,title:item.title}}}>二级路由{item.title}</MyNavLink>
   
  (2)编程式导航方式：
 this.props.history.replace(`/home/message/detail`,{id,title})

   路由注册
   <Route path="/home/message/detail" component={Detail}/>
   
  /detail 路由接收参数
   //state接收参数方式
   const {id,title} = qs.parse(this.props.location.state)

4.编程式导航

		jsx部分
            //编程式导航链接
            &nbsp;<button onClick={()=>this.pushShow(item.id,item.title)}>push编程式导航</button>
            &nbsp;<button onClick={()=>this.replaceShow(item.id,item.title)}>replace编程式导航</button>

           //编程式导航路由注册
           //params方式注册
            <Route path="/home/message/detail/:id/:title" component={Detail}/>
            //search路由注册方式
             <Route path="/home/message/detail" component={Detail}/> 
            //state路由注册方式
            <Route path="/home/message/detail" component={Detail}/>
           
       js部分
            //编程式导航跳转
            replaceShow = (id,title) => {
                //params携带参数
                // this.props.history.replace(`/home/message/detail/${id}/${title}`)
                
                //search携带参数方式
                this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

                //state携带参数
                // this.props.history.replace(`/home/message/detail`,{id,title})
            }
			
			
            pushShow = (id,title) => {
                //push携带params参数形式
                //  this.props.history.push(`/home/message/detail/${id}/${title}`);

                //push携带search参数
                this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

                //state携带参数
                // this.props.history.push(`/home/message/detail`,{id,title})
            }

前进后退 goForward/go/goBack

    forWard = () => {
      this.props.history.goForward()
       }

       go = () => {
           this.props.history.go()
       }

       back = () => {
           this.props.history.goBack()
       }
           

二次封装NavLink，以上代码使用组件使用MyNavLink都是基于此处二次封装

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

export default class MyNavLink extends Component {
  render() {
    //children收集标签内容 <MyNavLink>about</MyNavLink>的about内容
    // const {children} = this.props
    // console.log(this.props)
    return (
        <NavLink activeClassName={styles.active} className={styles.link} {...this.props} ></NavLink> 
    )
  }
}

二.react路由跳转和传参方式-React-Router6(Hook方式实现)

1.params传递参数

 路由链接
<NavLink key={item.id} to={`detail/${item.id}/${item.content}`}>{item.title}<br/></NavLink>
 
 编程式
 import { useNavigate } from 'react-router-dom'
 const navigate = useNavigate()
 navigate(`/detail/${item.id}/${item.content}`)

params接收参数方式：
 //方式一.params接收参数 hook提供useParams 
 const {id,content} = useParams();

2.search传递参数

 路由链接
<NavLink key={item.id} to={`detail?id=${item.id}&content=${item.content}`}>{item.title}<br/></NavLink>

 编程式
 import { useNavigate } from 'react-router-dom'
 const navigate = useNavigate()
 navigate(`/detail?id=${item.id}&content=${item.content}`)

search接收参数方式：
const [search,setSearch] = useSearchParams();
const id = search.get('id');
const content = search.get('content');

3.state传递参数

 路由链接
<NavLink key={item.id} to={`detail`} state={{id:item.id,content:item.content}}>{item.title}<br/></NavLink>

 编程式
 import { useNavigate } from 'react-router-dom'
 const navigate = useNavigate()
 navigate(`/detail`,{
      replace:false,
      state:{
        id:item.id,
        content: item.content}
      }
    })

state接收参数方式：
import { useLocation } from 'react-router-dom'
const {state:{id,content}} = useLocation()
 

路由注册
1.路由表展示(App.js)
import {Routes,Route,useRoutes} from ‘react-router-dom’;
//jsx部分

   1.标签配置的路由形式
   <ul>
     <Routes>
         <Route path='/home' element={<Home />}></Route>
         <Route path='/about' element={<About/>}></Route>
         <Route path='/' element={<Navigate to='/home'/>}></Route>
     </Routes>

   2.路由表的形式 useRoutes 
     {
       useRoutes(elements)
     }

// 路由表动态配置路由
import elements from ‘./routes’;

routes文件-路由表配置例子

import About from '../components/About';
import Home from '../components/Home';
import Message from '../components/Home/Message';
import News from '../components/Home/News';
import Detail from '../components/Home/News/Detail';
import {Navigate} from 'react-router-dom';

const routes = [
    {
       path:'/home',
       element:<Home />,
       //二级路由
       children:[
        {
          path:'message',
          element:<Message />,
        },
        {
          path:'news',
          element:<News />,
          //三级路由
          children:[
            {
              //1. params参数接收
              // path:'detail/:id/:content',
              //2. search接收参数
              path:'detail',
              element:<Detail />,
            }
          ]
        }
       ]
    },
    {
      path:'/about',
      element:<About />
    },
    {
      path:'/',
      element:<Navigate to="/home" />
    },
]

export default routes

2.嵌套路由展示

import { Outlet } from 'react-router-dom'
//jsx中使用Outlet
<Outlet/>