React 路由 6：全面解析与应用技巧

2022-11-06 16:36:45

探索 React 路由 6 的强大功能：入门和进阶技巧

1. React 路由 6 入门

1.1 安装 React 路由 6

要开始使用 React 路由 6，您需要在项目中安装它。使用以下命令：

npm install react-router-dom

1.2 创建路由器

路由器充当路由规则的容器。在 React 应用程序中创建一个名为 App.js 的文件，并添加以下代码：

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

const App = () => {
  return (
    <BrowserRouter>
      {/* 路由规则将在这里定义 */}
    </BrowserRouter>
  );
};

export default App;

1.3 定义路由规则

在 <BrowserRouter> 内，添加 <Routes> 组件来定义路由规则。每个路由规则使用 <Route> 组件指定路径和要渲染的组件。例如：

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

2. React 路由 6 进阶技巧

2.1 动态路由

动态路由允许您根据动态值（如 URL 中的参数）渲染不同的组件。使用冒号 (:) 指定动态路径参数：

<Route path="/user/:id" element={<User />} />

2.2 嵌套路由

嵌套路由使您可以创建更复杂的分层路由结构。父路由中嵌套一个子路由：

<Route path="/parent">
  <Route path="child" element={<Child />} />
</Route>

2.3 路由守卫

路由守卫可用于控制特定路由是否可访问。它们可以根据用户身份验证状态或其他条件来限制访问：

const isAuthenticated = () => {
  // 检查用户是否已登录
};

<Route path="/private" element={<Private />} />

2.4 路由切换动画

<AnimatePresence> 组件可用于在路由切换时添加过渡动画：

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

const App = () => {
  return (
    <AnimatePresence>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </AnimatePresence>
  );
};

export default App;