react-routerV6 的基本使用和三种传参方式react-router 的官网地址：https://reactr

react-router 的官网地址：reactrouter.com/en/main

最新的 react-router 提供了很多好玩的 hooks，我们再也不用老的方式给路由传参了。有没有被解放的感觉？

基本使用

安装react-router-dom, react-router-dom里面包含了react-router里面的所有api，所以导入一个就够了。

npm i react-router-dom -S

main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

routes/index.jsx



import React from 'react';
import App from '../App';
import Home from '../application/Home';

export default [
  {
    path: "/",
    element: <Home></Home>,
    children: [
      {
        path: "/",
        element: <Home></Home>,
      }
    ]
  }
];

app.jsx里面占位，一般占位都在布局里面占位，并不在app.js里面。

import React from 'react';
import { GlobalStyle } from './style';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import routes from './routes/index';

//公共数据都放这里
function App() {
  const router = createBrowserRouter(routes);
  
  return (
    <RouterProvider router={router}>
      <GlobalStyle></GlobalStyle>
    </RouterProvider>
  );
}

export default App;

Home.jsx里面的内容

import React from 'react';

export default function Home() {
  return <>Home</>;
}

测试

react-router 传参有三种形式：

一、路由跳转使用navigate()

场景：跳转路由的同时，有时候要需要传递参数

由于 v6 把旧版本中的路由组件能收到的三个参数(Location，history，match) 移除了，所以不能直接使用this.props.location.pathname 获取到当前路由。而且 withRouter也移除了。咋办？

在路由配置文件里面直接配置path，然后参数用？加进去就好了。

设置参数

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

...
const navigate = useNavigate()
...
navigate("/recommend");
navigate("/recommend/details?id=18");

获取参数

import { useSearchParams } from "react-router-dom";

let [searchParams, setSearchParams] = useSearchParams()
console.log(searchParams.get('id')) //  18

这种方式是我们项目里面最常见的一种传参。也是我们必须掌握的方式。

二、 `params` 传参

params 传参需要在路由表配置的位置添加一个参数占位。

传参

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

 const navigate = useNavigate();
 navigate("/recommend/Eula/18");

取参

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

  const params = useParams()
  console.log("params:",params);// 打印 {   "name": "Eula",    "age": "18"}

现在明白useSearchParams 和useParams的区别了吗？useSearchParams获取的是？后面的参数，useParams获取的path里面占位的参数。

三、`state`传参

使用state传参时，参数需要放到state对象里面；但是此时path里面不能存在占位，否则不能占位。

传参

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

  const navigate = useNavigate();
  navigate("/page1",{ state: {name:'Eula',age:"18"}});

取参数

import { useLocation } from "react-router-dom";
  ...
  let location = useLocation(); 
  console.log("params:",location);
  ...

四. 利用 URLSearchParams

'use client';

import { useSearchParams } from 'next/navigation';

export default function SortProducts() {
  const searchParams = useSearchParams();

  function updateSorting(sortOrder) {
    console.log(searchParams.toString(), 888);
    const params = new URLSearchParams(searchParams.toString());
    console.log(params, 999);
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }

  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  );
}

上面例子虽然是next的，但是在react里面URLSearchParams 的使用方法是一致的。

总结

传参方式	使用	取参
`searchParams` 传参	navigate("/page1?name=Eula&age=18");	useSearchParams（）
`params`传参	`navigate("/page1/Eula/18")`需要路由表添加占位: path: “/page1/:name/:age”	useParams（）
`state`传参	navigate("/page1",{ state: {name:'Eula',age:"18"}})	useLocation（）