React中使用路由

 

安装:

npm install react-router-dom localforage match-sorter sort-by

 

声明router

当安装好路由后就需要在 main.js 中声明以便可以引入

import router from "./router"
//通过从 router 文件中的声明引入路由对象,供项目使用
import { RouterProvider } from 'react-router-dom'
​
let Root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
​
​
Root.render(
     <Provider store={store}>
        <RouterProvider router={router} />
     </Provider>
)

• RouterProvider :路由提供者 因为其绑定了router 文件(路由对象定义文件)所有可以访问到绑定了路由的文件

• 而 Provider是数据仓库提供者,此处可以先忽略

 

 

创建路由文件

在src下新建一个 router.tsx

• 引入需要引入的路径

//引入base页面来展示视窗
import App from "./App";
//引入需要采用到的路由,
import { createHashRouter, redirect } from "react-router-dom";
//工具函数
import { isLogin } from "./until/index";
​
//引入页面
import Fast from "./pages/Fast";
import Home from "./pages/Home/Home";
import Login from "./pages/Login";
import User from "./pages/User";
import Register from "./pages/register";
import Toggle from "./pages/Toggle/Toggle"

• 引入App.tsx的用处是提供一个视窗木页面来供给使用

• 而工具函数 isLogin 的作用即为提供方法给路由守卫使用

 

编写路由

在 router.tsx 页面中

• 我们声明一个 router对象,并且使用哈希路由模式进行跳转

• 在文件末尾导出 router 以便 main.tsx可以拿到

const router = createHashRouter([
    {
        path: "/",
        element: <App />,
        children: [
            { index: true, element: <Home /> },
            { path: "login", element: <Login /> },
            { path: "register", element: <Register /> },
            { path: "fast", element: <Fast /> },
            { path: "user", element: <User />,},
            { path: "toggle", element: <Toggle /> },
        ]
}])
​
export default router