React页面路由跳转

React页面路由跳转

1、编程式跳转

        编程式跳转的方式使用react-route-dom中的useNavigate方法，传入URL路径即可进行页面跳转。（注：useNavigate不能在类组件中直接使用）

2、useNavigate钩子

        useNavigate钩子返回一个函数，可以用于导航到一个新的地址。首先在组件顶部导入useNavigate钩子。

3、useNavigate钩子使用步骤

• 先引入

import {useNavigate} from 'react-router-dom';

• 在函数组件体内，调用useNavigate获得navigate函数：

const navigate = useNavigate();

• 当需要进行跳转时，直接调用navigate函数并传递目标地址作为参数，例如：

navigate('/stdSTAuthSucc');

4、使用useNavigate钩子路由传参

        使用navigate的第二个参数可以传递一个state对象，来向目标路由页面传递数据。例如：

• 跳转传参：

navigate('/stdSTAuthSucc',{state:{succData:{param:'value'}}});

• 接受参数的目标页面先定义useLocation钩子，例如：

const location = useLocation();

• 在目标页面获取接受的参数：

location.state.succData.param

5、使用useNavigate钩子替换当前页面

        使用navigate参数中的第一个参数replace设置为true，可以替换当前页面并传递状态参数。

• 跳转传参：

navigage('/stdSTAuthSucc',{replace:true,{name:'tina',age:'18'}});

• replace设置为true之后，不可通过navigage(-1)回退到上一页面

6、目标组件使用useParams钩子获取动态路由参数

        仍然是用navigate进行路由跳转，在目标组件中使用useParams钩子来接受参数，这个参数在URL地址栏里是可以看到的，例：

http://localhost:3000/stdSTAuthSucc/123

• 首先，定义路由，如下：/stdSTAuthSucc/:id

{
    path:'/stdSTAuthSucc/:id',
    element:(
        
            
        
    )
}

• 跳转传参：

navigate('/stdSTAuthSucc/123');

• 接受参数的页面先引入useParams钩子：

import {useParams} from 'react-router-dom';

• 获取接受的参数：

const {id} = useParams();