react | react-router-dom路由跳转 | useRoutes、 useNavigate钩子 | 编程式导航 | 路由传参

react-router-dom官网：reactrouter.com/en/main

步骤：

1、下载react-router-dom

npm install react-router-dom

2、编写路由配置文件

在根目录下创建一个route的文件夹，且在其内部创建index.js文件：

import { useRoutes, Navigate } from 'react-router-dom';
import React, { memo } from 'react';
import Login from '../components/login/index';
import Home from '../home/index.js';

const DefineRoutes = memo(() => {
  const routes = useRoutes([
    {
      path: '/Login',
      element: <Login />,
    },
    {
      path: '/Home',
      element: <Home />,
    },
    {
      path: '/',
      element: <Login />,
    },
  ]);
  return routes;
});

export default DefineRoutes;

3、在App.js文件中引入使用：

import React, { memo } from 'react';
import DefineRoutes from './router';
import { BrowserRouter } from 'react-router-dom';
import './App.scss';

function App() {
  return (
    <BrowserRouter>
      <div className="content_warrper">
        <DefineRoutes></DefineRoutes>
      </div>
    </BrowserRouter>
  );
}

export default App;

切记要在app外面包一层,不然会报错：useRoutes() may be used only in the context of a ＜Router＞ component.

4、在需要使用的组件中：

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

export default function Login() {
    
  const navigate = useNavigate();

  function submit() {
    // 路由跳转及传参
    return navigate('/Home'，{ state: { data } });
  }

路由传参

params传参：

//路由链接(携带参数)：
<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
//或 <Link  to={`/b/child1/${id}/${title}`}>Child1</Link> 

//注册路由(声明接收)：
<Route path="/b/child1/:id/:title" component={Test}/>
    
//接收参数：
import { useParams } from "react-router-dom";
const params = useParams();
//params参数 => {id: "01", title: "消息1"}

search传参：

//路由链接(携带参数)：
 <Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>

//注册路由(无需声明，正常注册即可)：
<Route path="/b/child2" component={Test}/>
        
//接收参数方法1：
import { useLocation } from "react-router-dom";
import qs from "query-string";
const { search } = useLocation();
//search参数 => {age: "20", name: "zhangsan"}

//接收参数方法2：
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
// console.log( searchParams.get("id")); // 12

state传参：

//通过Link的state属性传递参数
 <Link
     className="nav"
     to={`/b/child2`}
     state={{ id: 999, name: "i love merlin" }} 
 >
    Child2
</Link>

//注册路由(无需声明，正常注册即可)：
<Route path="/b/child2" component={Test}/>
    
//接收参数：
import { useLocation } from "react-router-dom";
const { state } = useLocation();
//state参数 => {id: 999, name: "我是梅琳"}

//备注：刷新也可以保留住参数

！！！const navigate = useNavigate()要在Login内，方法外，不然会报错：React Hook "useNavigate" is called in function "submit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"