react 路由 v6 数组配置路由

react v6路由跟以前的版本有较大的区别，这里就不做区别了，主要是介绍v6路由导航的使用：

步骤一：安装最新的 react-router-dom

npm 方式

npm i react-router-dim 

------------------------------------------------------------

yarn 方式

yarn add react-router-dom

步骤二：目录结构

react 有入口组件 index.js 、根组件 app.js ，这里我新建一个专门管理路由的文件夹 router,在router文件夹中新建index.js。

步骤三：文件引入

3.1 在index.js入口文件代码：

import React from "react";

import ReactDOM from "react-dom/client";

import { BrowserRouter as Router} from "react-router-dom";

import RootApp from "./App.js"; //引入根组件

const root = ReactDOM.createRoot(document.getElementById("root")); //创建html 根元素

root.render(  // 页面渲染
    <Router> 
      <RootApp />
    </Router>
);

3.2 app.js文件代码

import routes from "./router"  //引入配置好的路由数组

import { useRoutes } from "react-router-dom";  //引入路由数组处理hooks

export default () => { //导出根组件
    const element = useRoutes(routes)  //将数组配置的路由转换成react支持的路由模式
    return <div>{element}</div>; //路由渲染
};

步骤四：路由配置

代码如下，文件位置 : router/index.js

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

/* 
    注意：所有hooks的使用只能在组件内，不能在函数内，组件外部调用
*/

/*********************************** 创建组件 ********************************************** */
const A = () => {
  const navigate = useNavigate(); //使用hooks进行编程式路由导航的跳转

  const location = useLocation(); //通过hooks获取路由参数

  //点击事件的事件处理程序，使用箭头函数的方式进行函数声明，避免this指向问题
  const handleClick = () => {
    location.pathname == "/A" ? navigate("/A/Aa") : navigate("/A");
  };

  return (
    <div>
      <h1> page A</h1>
      <div
        style={
   
   {
          width: "500px",
          height: "100px",
          border: "1px solid #ccc",
          marginBottom: "20px",
        }}
      >
        <h4>以下是子路由的位置：</h4>
        {/* 子路由占位符 类似于vue中的 <router-view /> */}
        <Outlet />
      </div>
      <button style={
   
   { marginBottom: "20px" }} onClick={handleClick}>
        点击 切换A组件 的嵌套路由
      </button>
      <br />
      {/* 通过Link组件来实现路由的跳转,Link组件在react中最终在页面会被编译为 a标签 */}
      <Link to={"/C"}>点击 进行路由传参界面演示</Link>
    </div>
  );
};

const Aa = () => {
  return <div> page Aa : 我是A的嵌套路由</div>;
};

const Ab = () => {
  return <div> page Ab : 我是A嵌套路由的默认显示路由</div>;
};

const B = () => {
  const navigate = useNavigate(); //使用hooks进行编程式路由导航的跳转
  return (
    <div>
      <h1>page B</h1>
      <button onClick={() => navigate("/A")}>click me to page A</button>
    </div>
  );
};

const C = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    /* 
    此处的传参分为三种方式：
    1、 路由层面的id传递
    2、 地址栏上的参数传递，即为 ? 后面的参数
    3、 state 数据传递，类似于vue中的query传参
    */

    navigate("/D/12?phone=15596652251", {
      state: {
        name: "Tony",
        age: 23,
        sex: "man",
      },
    });
  };

  return (
    <div>
      <h1>page C : 路由传参演示,传递参数</h1>
      <button onClick={handleClick}>点击进行页面传参</button>
    </div>
  );
};

const D = () => {
  const { id } = useParams(); //获取路由参数

  const [searchParams] = useSearchParams(); //获取地址栏参数对象
  const phone = searchParams.get("phone");

  const location = useLocation(); //获取路由对象
  console.log(location);
  const state = location.state;
  return (
    <div>
      <h1>page D : 路由传参演示,接收参数</h1>
      <div style={
   
   { marginBottom: "20px" }}>路由接收的参数id --- {id}</div>
      <div style={
   
   { marginBottom: "20px" }}>地址栏接收的参数: --- {phone}</div>
      <div style={
   
   { marginBottom: "20px" }}>
        state接收的参数: --- name:{state.name} --- age: {state.age} --- sex:{" "}
        {state.sex}
      </div>
    </div>
  );
};
/*********************************** 路由配置 ********************************************** */

const routes = [
  {
    path: "/A",
    element: <A />,
    children: [
      //嵌套路由
      {
        path: "/A/Aa",
        element: <Aa />,
      },
      {
        // path: "/A/Ab",
        index: true, //嵌套路由默认显示的组件
        element: <Ab />,
      },
    ],
  },
  {
    path: "/B",
    element: <B />,
  },
  {
    path: "/C",
    element: <C />,
  },
  {
    path: "/D/:id", //配置路由，页面传递id
    element: <D />,
  },
  {
    //配置默认路由
    path: "/",
    element: <Navigate to="/B" />, //重定向到 /B 页面
  },
];

export default routes; //导出配置好的路由数组

以上就是react router v6数组路由配置，复制即可查看使用。

以下是整个路由的演示过程：