React 导航教程 | React Router | 客户端路由

介绍

在这个项目中，你将学习如何在 React 应用程序中实现导航功能。你将创建一个带有导航栏和页面的简单应用程序，这些页面可以通过链接进行导航。

👀 预览

项目预览

🎯 任务

在这个项目中，你将学习：

如何设置项目并安装依赖项
如何添加路由和路由匹配器，以实现导航栏中菜单的导航
如何从卡片列表添加到单个卡片的导航

🏆 成果

完成这个项目后，你将能够：

使用 React Router 处理客户端路由
在 React 应用程序中创建链接并在不同页面之间导航
使用 React Router 中的 state 对象在组件之间传递数据

设置项目

在这一步中，你将学习如何设置项目并安装必要的依赖项。

打开你的代码编辑器并导航到项目目录。

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── Card.js
│   │   ├── Cards.js
│   │   └── Home.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

接下来，在终端中使用 npm install 命令下载依赖项，等待依赖项下载完成，然后使用 npm start 命令启动项目。

一旦项目成功启动，点击“Web 8080”在你的浏览器中进行预览。

添加路由和路由匹配器

在这一步中，你将学习如何添加路由和路由匹配器，以实现导航栏中菜单的导航。

打开 src/index.js 文件并导入必要的模块：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

用 BrowserRouter 组件包裹 App 组件：

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

打开 src/App.js 文件并导入必要的组件和模块：

import React from "react";
import { Route, Switch, Link } from "react-router-dom";
import { Home } from "./components/Home";
import { Cards } from "./components/Cards";
import { Card } from "./components/Card";
import "./App.css";

添加导航菜单和 Switch 组件来处理不同的路由：

const App = () => {
  return (
    <div className="app">
      <header>
        <Link to="/" className="menu menu-1">
          主页
        </Link>
        <Link to="/cards" className="menu menu-2">
          卡片页面
        </Link>
      </header>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/cards" exact component={Cards} />
        <Route path="/cards/:id" component={Card} />
      </Switch>
    </div>
  );
};

Switch 组件确保一次只渲染一个路由，而 Route 组件定义了不同的路由以及要渲染的相应组件。

添加从卡片列表到单个卡片的导航

在这一步中，你将学习如何添加代码，以便从卡片列表页面跳转到单个卡片页面。

打开 src/components/Cards.js 文件并导入必要的模块：

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

添加代码以渲染带有指向单个卡片页面链接的卡片列表：

export const Cards = () => {
  const colors = ["#26547c", "#ef476f", "#ffd166", "#06d6a0"];

  return (
    <div className="page cards">
      {colors.map((c, idx) => {
        return (
          <Link
            key={idx}
            to={{
              pathname: `/cards/${idx + 1}`,
              state: { bgColor: c }
            }}
          >
            <div
              className={`card card-${idx + 1}`}
              style={{ backgroundColor: c }}
            >
              卡片 {idx + 1}
            </div>
          </Link>
        );
      })}
    </div>
  );
};

Link 组件用于创建指向单个卡片页面的链接，to 属性用于指定要传递给 Card 组件的路径和状态。

打开 src/components/Card.js 文件并导入必要的模块：

import React from "react";
import { useParams, useLocation } from "react-router-dom";

添加代码以渲染单个卡片页面：

export const Card = () => {
  const { id } = useParams();
  const { state } = useLocation();

  return (
    <div
      className="page card-page"
      style={{ backgroundColor: state.bgColor }}
    >
      <p>卡片 {id}</p>
    </div>
  );
};

useParams 钩子用于从 URL 中检索 id 参数，useLocation 钩子用于检索从 Cards 组件传递过来的 state 对象。

现在，你已经完成了这个项目。最终结果如下截图所示。点击卡片页面会带你回到卡片列表页面，点击每张卡片会带你进入单个卡片页面。

卡片列表和单个卡片之间的导航