实现 React 导航功能

JavaScriptJavaScriptIntermediate
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何在 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” 在你的浏览器中进行预览。

添加路由和路由匹配器

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

  1. 打开 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";
  2. BrowserRouter 组件包裹 App 组件:

    root.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
  3. 打开 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";
  4. 添加导航菜单和 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 组件定义了不同的路由以及要渲染的相应组件。

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

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

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

    import React from "react";
    import { Link } from "react-router-dom";
  2. 添加代码以渲染带有指向单个卡片页面链接的卡片列表:

    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 组件的路径和状态。

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

    import React from "react";
    import { useParams, useLocation } from "react-router-dom";
  4. 添加代码以渲染单个卡片页面:

    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 对象。

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

卡片列表和单个卡片之间的导航
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程