路由跳转与传值

1、路由跳转

与vue相同，react中的路由跳转同样分为两类，分别是NavLink声明式路由跳转，另一个是使用hookAPi(useNavigate)的编程式路由跳转；

但是在react中有函数式组件和类组件两种组件，hookAPI只能在函数式组件中可以正常使用，所以如果需要在类组件中使用hookAPI，根据你使用的react-router-dom的使用版本的不同，所使用的方法也是不同；

在react-router-dom5中可以直接使用withRouter；在react-router-dom6中则需要自己封装一个withRouter的方法；

 1.1 函数式组件的路由跳转

1.1.1 声明式路由跳转

import { NavLink} from "react-router-dom";
<NavLink to={'/my'}>
     我的
</NavLink>

 1.1.2 编程式路由跳转

import { useNavigate } from "react-router-dom";
function Home(){
const change =()=>{
    const navigate = useNavigate();
    navigate('my')
}
return (
    <div>
        <button onClick={change}>
          my
        </button>
    </div>
    )
}
export default Home;

1.2 类组件的路由跳转（react-router-dom 6）

1.2.1 声明式路由跳转 

与函数式组件的声明式路由跳转相同。

import { NavLink} from "react-router-dom";
<NavLink to={'/my'}>
     我的
</NavLink>

1.2.2 编程式路由跳转

自己封装一个withRouter高阶组件；目的是暴漏一个方法，该方法将类组件传入，将useNavigate(useLocation,useParams)等hookAPI作为自定义的属性传入类组件中，再将该组件返回；

#withRouter.js
import { useNavigate,useLocation,useParams } from 'react-router-dom';

function withRouter(COM){
    const navigate = useNavigate();
    const location= useLocation();
    const params= useParams();
    return (props)=>(
        <COM  {...props} navigate={navigate} location={location} params={params}></COM>
    )
}
export default withRouter;

//将withRouter方法导入
import withRouter from './withRouter'
// 在类组件中可以直接使用navigate、location、params
class Home extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="home">
                <h1 >首页</h1>
                <div>
                    <button onClick={()=>{this.props.navigate('/my')}}>
                        跳转测试
                    </button>
                </div>
            </div>
        );
    }
}

//导出该类组件的时候使用withRouter方法
export default withRouter(Home);

2.路由跳转传值

路由跳转分为声明式跳转和编程式跳转；

路由跳转传值则分为三部分：

1.url拼接传值：   传递的数据有限

        接收：（传递的是汉字的话需要先解码）：decodeURI(location.search.split('=')[1])

2.state对象传值： url中看不到传递的数据

        接收：location.state.id

3.动态路由传值：必须先设置动态路由/my/:id/:name

        接收 params.id 

 2.1 函数式组件传值

import { NavLink,useNavigate} from "react-router-dom";

// 函数式组件 
function RouterPass() {
    const navigate = useNavigate(); //跳转的路由对象
    let id = 890
    const change = ()=>{
        //this.$router 是vue中路由器对象  react
        // this.$route 是路由信息对象   react中是useLocation()
        // 1.url拼接跳转
        // navigate('/my?name=黑黑');

        // 2.state对象传值
        // navigate('/my',{
        //     state:{
        //         id:116611
        //     }
        // })

        // 3.动态路由传参
        navigate('/order/888/洛阳')
    }
    return ( <div>
        <h1>
            跳转前的函数式页面
        </h1>
        {/* 一，导航式传值 */}
        {/* 拼接传值 */}
        <NavLink to={'/my?name=张三'}>
        1.url拼接传值
        </NavLink>
        <br />
        {/* state对象传值*/}
        <NavLink to={'/my'} state={{id:999}}>
            2.state 对象传值 优点：url看不到传递的数据 
        </NavLink>
        <br />
        {/* 动态路由参数传值 */}
        <NavLink to={`/order/${id}/lisi`} state={{sex:44444}}>
            3.动态路由参数传值，必须先设置动态路由/order/:id/:name
        </NavLink>
        <br />
        {/* 二 js编程跳转传值 */}
        <button onClick={change}>js编程跳转传值</button>
        </div>
       
    </div> );
}

export default RouterPass;

 2.1.1 url拼接传值接收和state对象传值接收

// hookAPI只能用在函数式组件里面 useLocation，useNavigate
// useState useEffect,到那时可以把hookAPI传进类组件中进行使用;
import { useLocation,useParams,useNavigate } from "react-router-dom";
// useLocation 获取路由对象，
//useParams 获取动态路由参数的方法
// useNavigate js跳转的方法

function My() {
    const location = useLocation();
    console.log(location,'555555')

    return ( <div>   
        用来接收路由跳转传值的函数式组件,{ decodeURI( location.search.split('=')[1])}
        <br />
        {location.state&&location.state.id}
    </div> );
}

export default My;

 2.1.2 动态路由设置与接收

#router>index.js
  {/* 动态路由 */}
<Route path="/order/:id/:name" element={<Order />}></Route>

 接收：

#order.jsx
import { useParams } from "react-router-dom";
function Order() {
    const params = useParams();
    console.log(params)
    return ( 
        <div>
            order界面用来显示动态路由传参获取方式:{params.id}--{params.name}
        </div>
     );
}

export default Order;

 2.2 类组件传值

类组件传值与函数组件不同的是这里使用navigate进行js编程式跳转是通过this.props.navigate(‘/my’)进行跳转；

声明式跳转与函数式组件一样；

import React, { Component } from "react";
//导入自己封装的withRouter高阶函数
import withRouter from "../../router/WithRouter"; 


class RouterPass extends Component {
    constructor (props){
        super(props);
        this.state = {}
    
    }
    change = ()=>{
    //this.$router 是vue中路由器对象  react
        // this.$route 是路由信息对象   react中是useLocation()
        // 1.url拼接跳转
        // this.props.navigate('/my?name=黑黑');

        // 2.state对象传值
        // this.props.navigate('/my',{
        //     state:{
        //         id:116611
        //     }
        // })

        // 3.动态路由传参
        this.props.navigate('/order/888/洛阳'
    }
    render(
    <div>
        <button onClick={()=>{this.change}}>
              编程跳转测试
         </button>
         {/* 一，导航式传值 */}
        {/* 拼接传值 */}
        <NavLink to={'/my?name=张三'}>
        1.url拼接传值
        </NavLink>
        <br />
        {/* state对象传值*/}
        <NavLink to={'/my'} state={{id:999}}>
            2.state 对象传值 优点：url看不到传递的数据 
        </NavLink>
        <br />
        {/* 动态路由参数传值 */}
        <NavLink to={`/order/${id}/lisi`} state={{sex:44444}}>
            3.动态路由参数传值，必须先设置动态路由/order/:id/:name
        </NavLink>
    </div>
    )
}
export default withRouter(RouterPass );

 2.2.1 url拼接传值接收和state对象传值接收

这里如果使用类组件接收传值的话，也需要导入自己封装的withRouter高阶组件，然后才可以使用this.props.location来拿到传递的值；

// hookAPI只能用在函数式组件里面 useLocation，useNavigate
// useState useEffect,到那时可以把hookAPI传进类组件中进行使用;
import { useLocation,useParams,useNavigate } from "react-router-dom";
// useLocation 获取路由对象，
//useParams 获取动态路由参数的方法
// useNavigate js跳转的方法

function My() {
    const location = useLocation();
    console.log(location,'555555')

    return ( <div>   
        用来接收路由跳转传值的函数式组件,{ decodeURI( location.search.split('=')[1])}
        <br />
        {location.state&&location.state.id}
    </div> );
}

export default My;

 2.2.2 动态路由设置与接收

#router>index.js
  {/* 动态路由 */}
<Route path="/order/:id/:name" element={<Order />}></Route>

接收：

这里如果使用类组件接收传值的话，也需要导入自己封装的withRouter高阶组件，然后才可以使用this.props.params来拿到传递的值；

#order.jsx
import { useParams } from "react-router-dom";
function Order() {
    const params = useParams();
    console.log(params)
    return ( 
        <div>
            order界面用来显示动态路由传参获取方式:{params.id}--{params.name}
        </div>
     );
}

export default Order;