react-router 6

1.main.jsx配置

官网：https://reactrouter.com/en/6.14.2/start/tutorial#nested-routes

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

// 导入router
import { RouterProvider } from "react-router-dom";
import router from "./router";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);

2.src/pages/router/index.jsx配置

import { createBrowserRouter, createHashRouter } from "react-router-dom";

// 组件
import App from "../App";
import Page1 from "../page/p1";
import Page2 from "../page/p2";
import Page3 from "../page/p3";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/p1",
    element: <Page1 />,
  },
  {
    path: "/p2",
    element: <Page2 />,
    children: [
      {
        path: "p3",
        element: <Page3 />, // 嵌套路由
      },
    ],
  },
]);

export default router;

3.访问嵌套路由

//1. 需要先配置好子路由的出口
// 2. 再在页面访问 localhost:5457/p2/p3 即可 （p3为子路由）
import { Outlet } from "react-router-dom";

const p2 = () => {
  return (
    <>
      <div className="p2">路由p2</div>
      <div className="children">
        <Outlet />
      </div>
    </>
  );
};

export default p2;

4.编程式导航

import { useState } from "react";
import Banner from "./Banner";

import { useSelector, useDispatch } from "react-redux";
import { add, reduce } from "./store/modules/counterStore";
// 导入 useNavigate
import { useNavigate } from "react-router-dom";

function App() {
  // 使用数据
  const state = useSelector((state) => state.counterStore.count);
  const dispatch = useDispatch();
  /**
  	在React Router中，useNavigate()是一个用于导航的Hook函数。它返回一个函数，该函数用于在组件中进行编程式导航，即通过JavaScript代码进行页面跳转。

与useDispatch()类似，useNavigate()也是一个Hook函数，它在函数组件中被调用时会返回一个新的导航函数。由于函数组件的特性，每次组件重新渲染时，useNavigate()都会被调用并返回一个新的导航函数。

因此，为了在组件的整个生命周期内使用相同的导航函数，你需要将useNavigate()的返回值赋值给一个变量。
  */

  // 使用 编程式导航
  const navigate = useNavigate();
  console.log(useNavigate());
  const goToDetail = () => {
    navigate("/p2/p3");
  };

  return (
    <>
      <div>首页</div>
      <Banner></Banner>
      <div>{state}</div>
      <button onClick={() => dispatch(add())}>增</button>
      <button onClick={() => dispatch(reduce())}>减</button>
      <div>
        <button onClick={goToDetail}>跳转</button>
      </div>
    </>
  );
}

export default App;