全栈小册

外观

Routes ​

作用 ​

  1. 路径匹配：Routes组件是一个容器，它包含多个Route组件。当用户访问一个 URL 时，Routes会遍历其所有的Route子组件，查找与当前 URL 匹配的Route。

  2. 组件渲染：找到匹配的Route后，Routes会渲染该Route的element属性所指定的 React 组件。

  3. 嵌套路由：Routes组件可以嵌套使用，这样你就可以在一个大的应用中创建复杂的路由结构。

  4. 路由守卫：Routes允许你在渲染组件之前执行一些逻辑，例如检查用户是否已经登录。

  5. 代码分割：与 React 的React.lazy()和Suspense组件结合，可以实现按需加载，从而提高应用性能。

案例 ​

1、基础路由 ​

这是最简单的路由设置。我们定义了两个路由：一个用于首页，另一个用于关于页面。

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

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

function Home() {
  return <h1>这是首页</h1>;
}

function About() {
  return <h1>这是关于页面</h1>;
}
import { BrowserRouter, Routes, Route } from "react-router-dom";

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

function Home() {
  return <h1>这是首页</h1>;
}

function About() {
  return <h1>这是关于页面</h1>;
}

2、动态路由 ​

你可以使用动态路由来捕获 URL 中的变量部分。

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

function User() {
  let { id } = useParams();
  return <h1>用户ID是：{id}</h1>;
}
<Route path="/user/:id" element={<User />} />;

function User() {
  let { id } = useParams();
  return <h1>用户ID是：{id}</h1>;
}

3、嵌套路由 ​

你可以在一个Routes组件内部再嵌套一个Routes组件。

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

function Layout() {
  return (
    <div>
      <Outlet />
    </div>
  );
}
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Layout() {
  return (
    <div>
      <Outlet />
    </div>
  );
}

4、路由守卫 ​

你可以在Routes组件中添加逻辑以实现路由守卫。

jsx
function App() {
  const isAuthenticated = false;

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/private"
          element={isAuthenticated ? <PrivatePage /> : <Navigate to="/login" />}
        />
      </Routes>
    </BrowserRouter>
  );
}
function App() {
  const isAuthenticated = false;

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/private"
          element={isAuthenticated ? <PrivatePage /> : <Navigate to="/login" />}
        />
      </Routes>
    </BrowserRouter>
  );
}

5、代码分割 ​

使用React.lazy和Suspense进行代码分割。

jsx
const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/lazy"
          element={
            <React.Suspense fallback={<div>加载中...</div>}>
              <LazyComponent />
            </React.Suspense>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}
const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/lazy"
          element={
            <React.Suspense fallback={<div>加载中...</div>}>
              <LazyComponent />
            </React.Suspense>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

这些只是Routes组件的一些基础和高级用法。根据你的项目需求，你可能还需要更多定制化的路由逻辑。但无论如何，Routes组件都是 React Router 库中非常重要的一部分，它为前端路由提供了强大而灵活的功能。希望这个详细的解释能帮助你更深入地理解Routes组件的各种可能用法。