10_react页面跳转方式

一、声明式导航

（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
// }

二、编程式导航

1. 操作 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
   // }
   

2. 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);