react 路由

安装 React Router

npm install react-router-dom

在入口文件 main.jsx 配置

首先在 react项目的入口文件index.js文件中，使用 BrowserRouter 将 包裹起来

import { StrictMode } from "react";
import { BrowserRouter } from "react-router-dom";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

BrowserRouter：包裹这个应用，一个React应用只需使用一次

在 React Router 中提供了两种路由模式：hash 和 history。

对应的的路由组件分别是：

• HashRouter：hash 模式的路由
• BrowserRouter：history 模式的路由

实际使用时，任选其中一个模式引入即可

其次，在App.js文件中，使用设置路由出口，使用指定导航链接

import React from "react";
import { Routes, Route } from "react-router-dom";

import Plant from "./pages/plant";
import PITagList from "./pages/PITagList";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Plant />}></Route>
      <Route path="/PITagList" element={<PITagList />}></Route>
      {/* <Route path='/register' element={<Register/>}></Route>
     <Route path='/' element={<Home/>}></Route> */}
    </Routes>
  );
}

核心组件作用说明

• Routes:提供一个路由出口，满足条件的路由组件会渲染到组件内部
• Route: 用于指定导航链接，完成路由跳转
• path:path属性指定匹配的路径地址
• element element属性指定要渲染的组件

路由跳转

React Router 中，路由的跳转分为两种方式：

• 标签（组件）跳转
• JS（API）跳转

通过Link组件跳转

<Splitter.Panel collapsible>
  <Link to="/PITagList?plant=wh">
    <Desc text={"WH"} />
  </Link>
</Splitter.Panel>

编程式路由跳转

实现步骤

1、导入useNavigate钩子函数

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

2、执行钩子函数得到跳转函数

let navigate=useNavigate();

执行跳转函数完成跳转

import React from 'react'
import {useNavigate} from 'react-router-dom'
​
export default function Register() {
  const navigate=useNavigate()
  const register=(e)=>{
    e.preventDefault()
    navigate('/login')
  }
  return (
    <div>
        <h1>用户注册</h1>
        <a href="#" onClick={(e)=>{register(e)}}>已注册，去登录</a>
    </div>
  )
}

注意

如果在跳转时不想加历史记录，可以添加额外参数replace为true

接收路由参数

1、react 路由 link 传参

import {useLocation } from 'react-router-dom'
const App = () => {
    const location = useLocation();
    const params = new URLSearchParams(location.search);
    const plant = params.get('plant');

  return (
    <Flex gap="middle" wrap>
      <Button type="primary" autoInsertSpace={false}>
        { plant }
      </Button>
      <Button type="primary" autoInsertSpace>
        确定
      </Button>
    </Flex>
  );
};
export default App;