React 路由

一、下载安装

npm install react-router-dom

二、路由的配置方法

第一种 使用 RouterProvider 目前官方推荐的方式

import React from "react";
import ReactDOM from "react-dom/client";

// 导入两个核心组件
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

// 创建路由对象
const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
  {
    path: "/list",
    element: <div>list</div>,
  },
  {
    path: "/detail",
    element: <div>detail</div>,
  },
]);

// 使用RouterProvider 加载路由对象
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

第一种 使用 RouterProvider 目前官方推荐的方式

二、路由跳转（切换）

1、使用 Link组件

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

const Home = () => {

    return (
        <div>
            <!--  普通跳转 -->
            <Link to="要跳转的页面的path"> 文字提示</Link>

            <!--  替换跳转  -->
            <Link to="要跳转的页面的path" replace> 文字提示</Link>

            <!--  跳转会触发整个页面的重新加载(跳转之后刷新) -->
            <Link to="要跳转的页面的path" reloadDocument> 文字提示</Link>
        </div>
    );
  }
  
export default Home;

2、使用 hook来实现 编程式导航(函数组件)

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

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

    const toDetail = () => {
        navigate("/detail");
    };

    const toListByReplace = () => {
        navigate("/list", { replace: true })
    }


    return (
        <div>
            <h1>Home</h1>
         
            <button onClick = { toDetail }>
                编程式导航 by useNavigate 跳转到详情页
            </button>

            <button onClick = { toListByReplace }>
                编程式导航 by useNavigate replace跳转
            </button>

        </div>
    );
  }
  
export default Home;

三、路由传参