react路由安装

cnpm i --save-dev react-router-dom
"react-router-dom": "^6.9.0",

需要知道react-router-dom中主要使用内置组件来配置路由

 <BrowserRouter>
    {/* The rest of your app goes here */}
    //中间位置补路由配置
  </BrowserRouter>,

使用内置组件开始配置路由结构

使用内Routes 为路由的配置区域  相当于路由的出口
Route 是详细路由配置置组件Routes和Route组件

开始配置路由

<Route path="/admin" element={}></Route>
  path  路由路径
  element 路由的组件

配置之后的一级路由

 <BrowserRouter>
        {/* 路由配置 */}
        <Routes>
          <Route path="/admin" element={<Admin />}></Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
 </BrowserRouter>
 //上下一样
  <BrowserRouter>
        {/* 路由配置 */}
        <Routes>
          <Route path="/" element={<Admin />}></Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
  </BrowserRouter>

如果一级路由配置没有/路由需要进行路由重定向

使用内置组件Navigate重定向
用法：
<Navigate to="/admin" />
to重定向路由的路径
replace 是否替换当前路由路径  replace={true}

<Navigate to="/admin" replace={true} />

路由配置非路由路径进404组件

//引入路由模块
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
//引入路由组件
import Admin from "./views/Admin";
import Login from "./views/Login";
import NotFound from "./views/not-found";
export default () => {
  return (
    <>
      <BrowserRouter>
        {/* 路由配置 */}
        <Routes>
          <Route path="/admin" element={<Admin />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route
            path="/"
            element={<Navigate to="/admin" replace={true} />}
          ></Route>
          <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
};

//或者添加404路由
 <BrowserRouter>
        {/* 路由配置 */}
        <Routes>
          <Route path="/admin" element={<Admin />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route
            path="/"
            element={<Navigate to="/admin" replace={true} />}
          ></Route>
          <Route path="/not-found" element={<NotFound />}></Route>
          <Route
            path="*"
            element={<Navigate to="/not-found" replace={true} />}
          ></Route>
        </Routes>
</BrowserRouter>