【从0搭建react后台管理】10.react页面跳转方式

雪风

已于 2024-03-31 12:19:01 修改

阅读量462

点赞数

分类专栏： React JavaScript 文章标签： react.js javascript 前端 ecmascript 前端框架

于 2023-03-01 23:26:15 首次发布

本文链接：https://blog.csdn.net/weixin_42465316/article/details/129292174

版权

React 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

本文介绍了在React-Routerv6之前的版本中，声明式导航和编程式导航的不同方法，包括使用match.params,location.state,location.search以及新的useNavigatehook。同时展示了在最新版v6中如何使用useLocation,useSearchParams和useParams进行导航和参数传递。

摘要由CSDN通过智能技术生成

【项目地址】
https://gitee.com/shangqiao1996/member-points-mgmt

一、声明式导航

（react-router@6 之前）

[match]
<NavLink to='/layout/First/zhangsan/18'>First</NavLink>
<Route path="/layout/First/:name/:age" component={First}></Route>;
this.props.match.params;
// {
//   "name": "zhangsan",
//	  "age": "18"
// }

<NavLink
  to={{
    pathname: '/layout/Third',
    state: { name: 'zhangsan', age: 18 }
  }}
></NavLink>
this.props.location.state
// {
//     "name": "zhangsan",
//     "age": 18
// }

二、编程式导航

操作 history（react-router@6 之前）

[location.search]
this.props.history.push('/layout/Fifth?name=zhangsan&age=18')
this.props.location.search
// ?name=zhangsan&age=18

[location.state]
this.props.history.push('/layout/Sixth', { name: 'zhangsan', age: 18 })
this.props.location.state
// {
//     "name": "zhangsan",
//     "age": 18
// }

[match]
this.props.history.push('/layout/Fourth/zhangsan/18')
// 需要配置路由
<Route path='/layout/Fourth/:name/:age' component={Fourth}></Route>
this.props.match.params
// {
//      "name": "zhangsan",
//      "age": "18"
// }

[location.query]
this.props.history.push({
   pathname: '/layout/Seventh',
   query: {
     name: 'zhangsan'，
    age: 18
   }
})
this.props.location.query
// {
//     "name": "zhangsan",
//     "age": 18
// }

useNavigate()（react-router@6）【官方推荐】

import { useNavigate, useLocation, useParams } from "react-router";
import { useSearchParams } from "react-router-dom";

const location = useLocation();
const [searchParams] = useSearchParams();
const params = useParams();

// useNaviagte()('/points-get/promotion-points', { state: { name: 'shangqiao' } })
console.log("location", location.state);
// navigate('/points-get/promotion-points?name=shangqiao&age=20');
console.log("searchParams", searchParams.getAll("name"));
// navigate('/points-get/promotion-points/shangqiao');
console.log("params", params);