ReactRouter6快速入门教程

快速入门案例

main.ts

import { createRoot } from "react-dom/client"
import App from "./App.tsx"
import { BrowserRouter, Route, Routes } from "react-router-dom"function Hello() {return <h2>hello页面</h2>
}createRoot(document.getElementById("root")!).render(<BrowserRouter><Routes><Route path="/" element={<App />} /><Route path="/hello" element={<Hello />} /></Routes></BrowserRouter>
)

跳转页面

import { NavLink } from "react-router-dom"function App() {return (<><div><div><NavLink to="/hello">跳转/hello</NavLink></div><h1>App页面</h1></div></>)
}export default App

返回上一个页面

function Hello() {return (<div><h2>hello页面</h2><Link to="..">返回上一页</Link></div>)
}

重定向

<Route path="/hello2" element={<Navigate to="/hello" />} />

点击按钮跳转页面

import { NavLink, useNavigate } from "react-router-dom"function App() {const navigate = useNavigate()const handleClick = () => {navigate("/hello")}return (<><div><div><NavLink to="/hello">hello</NavLink><button onClick={handleClick}>hello2</button></div><h1>App页面</h1></div></>)
}export default App

404页面跳转

import { createRoot } from "react-dom/client"
import App from "./App.tsx"
import { HashRouter, Link, Route, Routes } from "react-router-dom"function Hello() {return (<div><h2>hello页面</h2><Link to="..">返回上一页</Link></div>)
}function NotFound() {return <h1>404 页面找不到</h1>
}createRoot(document.getElementById("root")!).render(<HashRouter><Routes><Route path="/" element={<App />} /><Route path="/hello" element={<Hello />} /><Route path="*" element={<NotFound />} /></Routes></HashRouter>
)

封装路由模块

router.tsx

import { Link, useRoutes } from "react-router-dom"
import App from "./App.tsx"function Hello() {return (<div><h2>hello页面</h2><Link to="..">返回上一页</Link></div>)
}function NotFound() {return <h1>404 页面找不到</h1>
}function BaseRouter() {return useRoutes([{ path: "/", element: <App /> },{ path: "/hello", element: <Hello /> },{ path: "*", element: <NotFound /> }])
}export default BaseRouter

main.ts中使用：

import { createRoot } from "react-dom/client"
import { HashRouter } from "react-router-dom"
import BaseRouter from "./router.tsx"createRoot(document.getElementById("root")!).render(<HashRouter><BaseRouter /></HashRouter>
)

优化路由模块

router.tsx

import { createHashRouter, Link } from "react-router-dom"
import App from "./App.tsx"function Hello() {return (<div><h2>hello页面</h2><Link to="..">返回上一页</Link></div>)
}function NotFound() {return <h1>404 页面找不到</h1>
}const router = createHashRouter([{ path: "/", element: <App /> },{ path: "/hello", element: <Hello /> },{ path: "*", element: <NotFound /> }
])export default router

main.tsx中使用：

import { createRoot } from "react-dom/client"
import { RouterProvider } from "react-router-dom"
import router from "./router.tsx"createRoot(document.getElementById("root")!).render(<RouterProvider router={router} />)

动态路由

router.tsx

import { createHashRouter, Link, useParams } from "react-router-dom"
import App from "./App.tsx"function BlogDetail() {const params = useParams()return (<div><h2>博客详情页面</h2><h2>要获取的文章ID：{params.id}</h2><Link to="..">返回上一页</Link></div>)
}function NotFound() {return <h1>404 页面找不到</h1>
}const router = createHashRouter([{ path: "/", element: <App /> },{ path: "/blog/:id", element: <BlogDetail /> },{ path: "*", element: <NotFound /> }
])export default router

访问：

<NavLink to="/blog/1">博客1</NavLink>
<NavLink to="/blog/2">博客2</NavLink>

嵌套路由

router.tsx

import { createHashRouter, Outlet } from "react-router-dom"
import App from "./App.tsx"function Layout() {return (<div><h2>头部</h2><div><Outlet /></div><h2>底部</h2></div>)
}function NotFound() {return <h1>404 页面找不到</h1>
}const router = createHashRouter([{ path: "/", element: <App /> },{path: "/layout",element: <Layout />,children: [{ path: "body1", element: <div>身体1</div> },{ path: "body2", element: <div>身体2</div> }]},{ path: "*", element: <NotFound /> }
])export default router

访问：

<NavLink to="/layout/body1">布局1</NavLink>
<NavLink to="/layout/body2">布局2</NavLink>

通过loader加载数据

import { createHashRouter, Outlet } from "react-router-dom"
import App from "./App.tsx"function Layout() {return (<div><h2>头部</h2><div><Outlet /></div><h2>底部</h2></div>)
}function NotFound() {return <h1>404 页面找不到</h1>
}function layoutLoader() {console.log("xxx")return "hello"
}const router = createHashRouter([{ path: "/", element: <App /> },{path: "/layout",element: <Layout />,loader: layoutLoader,children: [{ path: "body1", element: <div>身体1</div> },{ path: "body2", element: <div>身体2</div> }]},{ path: "*", element: <NotFound /> }
])export default router

loader 获取路径参数

function layoutLoader({ params }: any) {console.log("xxx", params.id)return "hello"
}

使用loader实现权限拦截的功能

function layoutLoader({ params }: any) {// 权限拦截：如果没有token，就跳转到登录页面const token = ""if (!token) {return redirect("/login")}console.log("xxx", params.id)return "hello"
}