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"
}