React Router 6 全攻略：从入门到精通

前端

2023-04-08 03:44:18

React Router 6：掌握构建单页应用的指南

单页应用程序 (SPA) 已成为现代网络开发的基石，而 React Router 6 是构建 SPA 的首选库之一。借助 React Router 6，您可以轻松创建动态且响应迅速的应用程序，从而提升用户体验。

理解核心概念

路由： 路由充当 URL 和应用程序组件之间的桥梁。它将特定的 URL 与一个处理该 URL 相关功能的组件相关联。

组件： 组件是应用程序的可重用模块，它们可以处理特定任务或显示特定信息。

导航： 导航是指在应用程序的不同组件之间移动。它可以通过点击链接、提交表单或使用 JavaScript 代码来触发。

上手使用 React Router 6

1. 安装库

使用 npm 安装 React Router 6 库：

npm install react-router-dom

2. 导入组件和钩子

导入必要的组件和钩子：

import { BrowserRouter, Route, Link } from "react-router-dom";

3. 创建路由表

路由表定义了应用程序的路由集合：

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/about",
    component: About,
  },
];

4. 创建 BrowserRouter

BrowserRouter 组件管理应用程序的路由和导航：

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map((route) => (
          <Route path={route.path} element={route.component} />
        ))}
      </Routes>
    </BrowserRouter>
  );
};

重定向

重定向允许您将用户从一个 URL 重定向到另一个 URL，通常用于处理不存在的页面或错误情况：

import { useNavigate } from "react-router-dom";

const Redirect = () => {
  const navigate = useNavigate();

  useEffect(() => {
    navigate("/home");
  }, []);

  return null;
};

嵌套路由

嵌套路由允许您将一个路由嵌套在另一个路由中，创建多级导航结构：

const ParentRoute = () => {
  return (
    <Route path="/parent">
      <Outlet />
    </Route>
  );
};

const ChildRoute = () => {
  return (
    <Route path="child">
      <ChildComponent />
    </Route>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ParentRoute />}>
          <Route path="child" element={<ChildRoute />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};