React 路由：探索那些年手写的代码

前端

2023-09-08 22:40:07

React 路由：从基础到高级指南

在现代 Web 开发中，React 是一种流行的 JavaScript 库，它允许创建交互式用户界面。React 路由是 React 生态系统中一个必不可少的工具，它使您能够构建动态且无缝的导航体验。

什么是 React 路由？

React 路由允许您在单页应用程序 (SPA) 中定义不同页面的路由规则。它提供了一种机制，可让您在页面之间平滑切换，同时维护应用程序的状态。

从手写代码开始

在 React 中，您可以从头开始手动编写路由代码。要实现此目的，需要使用 BrowserRouter 组件，该组件充当应用程序的路由管理器。您还可以使用 Route 组件定义要渲染的不同页面。

以下是使用手写代码创建简单路由系统的示例：

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

const App = () => {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
};

export default App;

使用路由库

使用路由库，例如 react-router，可以简化 React 路由的开发。react-router 提供了开箱即用的功能，例如嵌套路由、动态路由和路由参数。

要使用 react-router，请按照以下步骤操作：

安装 react-router-dom：

npm install react-router-dom

在您的 React 应用程序中使用 useRoutes 钩子定义路由规则：

import React from "react";
import { useRoutes } from "react-router-dom";

const App = () => {
  const routes = [
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/about",
      element: <About />,
    },
  ];

  return useRoutes(routes);
};

export default App;

创建导航链接

使用 Link 组件可以创建导航链接，以便在不同页面之间切换。react-router-dom 提供了 Link 组件，用于轻松创建此类链接：

import React from "react";
import { Link } from "react-router-dom";

const App = () => {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
    </ul>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  );
};

export default App;