【React】路由配置之路由表与Route标签两种方式

本文主要是介绍【React】路由配置之路由表与Route标签两种方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

下文中使用的是react-router-dom6，首先确保正确下载。未提到的细节可以参考ReactRouter官网。

npm install react-router-dom@6

方式一：Route标签

import { Route, Routes } from "react-router-dom"import Dashboard from "@v/Dashborad"
import Project from "@/views/Project"
import Test1 from "@/views/Setting/Test1"
import Test2 from "@/views/Setting/Test2"function App() {// 根据路由表生成对应的路由规则return (<Routes><Route path="/" element={<Dashboard />}></Route><Route path="/project" element={<Project />}></Route><Route path="/setting/test1" element={<Test1 />}></Route><Route path="/setting/test2" element={<Test2 />}></Route></Routes>)
}export default App

方式二：路由表配置（`推荐`）

声明路由表

import { Navigate, Outlet, RouteObject } from "react-router-dom"import MyLayout from "@/layout/index"import Dashboard from "@v/Dashborad"
import Project from "@/views/Project"
import Test1 from "@/views/Setting/Test1"
import Test2 from "@/views/Setting/Test2"import Login from "@/views/Login"
import NotFound from "@/views/NotFound"const routes: RouteObject[] = [{path: "/",element: <MyLayout />,children: [// Navigate 重定向{path: "",element: <Navigate to="/dashboard" />,},{path: "dashboard",element: <Dashboard />,},{path: "project",element: <Project />,},{path: "setting",element: <Outlet />, // 占位符children: [{ path: "test1", element: <Test1 /> },{ path: "test2", element: <Test2 /> },],},],},// 不需要layout的页面写到外面{path: "login",element: <Login />,},{ path: "*", element: <NotFound /> },
]export default routes

useRoutes生成路由规则

// 路由
import { useRoutes } from "react-router-dom"
import routes from "./router"function App() {// 根据路由表生成对应的路由规则const ElementRouter = useRoutes(routes)return <>{ElementRouter}</>
}export default App

注意：以上两种方式配置完毕后，别忘了在main.tsz中声明路由模式，HashRouter或BrowserRouter。

// router
import { BrowserRouter as Router } from "react-router-dom"ReactDOM.createRoot(document.getElementById("root")!).render(<Router><App /></Router>
)