React Router v6 完全指南(上)

简介: React Router v6 完全指南(上)

4.webp.jpg3.webp.jpgReact Router 是 React 生态系统中最受欢迎的第三方库之一,近一半的 React 项目中使用了 React Router,下面就来看看如何在 React 项目中使用 React Router v6 吧!1.webp (1).jpg

1. 概述

React Router 创建于 2014 年,是一个用于 React 的声明式、基于组件的客户端和服务端路由库,它可以保持 UI 与 URL 同步,拥有简单的 API 与强大的功能。

大多数现代 React 项目使用 npm、yarn、pnpm 等包管理器来管理项目依赖项。要将 React Router 添加到现有项目,就需要根据使用的包管理器来安装依赖:

// npm
npm install react-router-dom@6
// pnpm
pnpm add react-router-dom@6
// yarn
yarn add react-router-dom@6

接下来,使用 CodeSandBox 来创建一个 React + TypeScript 项目,使用核心库的版本如下:

  • react:18.0.0
  • react-dom:18.0.0
  • react-router:6.3.0
  • react-router-dom:6.3.0

Demo 初始目录结构如下:

- public
- src
  - App.tsx
  - index.tsx
  - style.css
- package.json
- tsconfig.json

在介绍 React Router 的概念以前,需要先区分两个概念:

  • react-router:为 React 应用提供了路由的核心功能;
  • react-router-dom:基于 react-router,加入了在浏览器运行环境下的一些功能。

2. 基本使用

(1)BrowserRouter

要想在 React 应用中使用 React Router,就需要在 React 项目的根文件(index.tsx)中导入 Router 组件:

import { StrictMode } from "react";
import * as ReactDOMClient from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);
root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

在这个文件中,我们导入了 BrowserRouter 组件,然后使用该组件包裹了 App 组件。现在,在这个 BrowserRouter 组件中,来自 react-router-dom 的其他组件和 hooks 就可以正常工作了。

BrowserRouter 是最常用的路由方式,即浏览器路由。官方文档也建议将 BrowserRouter 组件用于 Web 应用程序。除了这种方式,React Router 还支持其他几种路由方式:

  • HashRouter:在路径前加入#成为一个哈希值,Hash 模式的好处是不会因为刷新页面而找不到对应路径;
  • MemoryRouter:不存储 history,路由过程保存在内存中,适用于 React Native 这种非浏览器环境;
  • NativeRouter:配合 React Native 使用,多用于移动端;
  • StaticRouter:主要用于服务端渲染时。

(2)NavLink

在创建导航链接之前,先在App.tsx组件中创建一个标题:

javascript

import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <header>
        <h1>Hello World</h1>
      </header>
    </div>
  );
}

页面如下:

3.webp.jpg

下面来创建三个导航链接,这些链接会指向App.tsx 中的一些路由。这时就需要导入 NavLink 组件,它是一个导航链接组件,类似于 HTML 中的标签。NavLink 组件使用 to 来指定需要跳转的链接:

import { NavLink } from "react-router-dom";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <header>
        <h1>Hello World</h1>
      </header>
      <nav>
        <NavLink to="">首页</NavLink>
        <NavLink to="product">产品</NavLink>
        <NavLink to="about">关于</NavLink>
      </nav>
    </div>
  );
}

当点击“首页”时,就会跳转至路由 /

4.webp.jpg

当点击“产品”时,就会跳转至路由 /product

5.webp.jpg

当点击“关于”时,就会跳转至路由 /about

6.webp.jpg

可以看到,当点击这些导航链接时,网页的 URL 就会改变,跳转到对应的路由。

NavLink 是存在 active 状态的,所以可以为active 状态和非active 状态的导航链接添加样式:

css

复制代码

.nav-active {
  color: red;  font-weight: bold;}

接下来为导航链接添加样式判断条件,选择性的为其添加nav-active类:

import { NavLink } from "react-router-dom";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <header>
        <h1>Hello World</h1>
      </header>
      <nav>
        <NavLink
          to=""
          className={({ isActive }) => isActive ? "nav-active" : void 0}
        >
          首页
        </NavLink>
        <NavLink to="product">产品</NavLink>
        <NavLink to="about">关于</NavLink>
      </nav>
    </div>
  );
}

当点击“首页”时,会跳转到首页,导航链接会变成 active 状态。这时,“首页”二字会变成红色,字体也会加粗:

7.webp.jpg

(3)Link

react-router-dom 中,可以使用 Link 组件来创建常规链接。Link 组件与 NavLink 组件非常相似,唯一的区别就是 NavLink 存在 active 状态,而 Link 没有。

Link 组件和 NavLink 组件的使用方式类似,例如在产品页面有一个返回首页的按钮,需要传递给 to 需要跳转的路径:

import { Link } from "react-router-dom";
import "./styles.css";
export default function Product() {
  return (
    <div className="product">
      <header>
        <Link to="/">返回首页</Link>
      </header>
    </div>
  );
}

如果需要对 Link 进行更多控制,也可以传递给 to 一个对象,在这个对象中,可以通过 search 属性来添加查询字符串或通过 hash 属性来传递 hash值,例如:

import { Link } from "react-router-dom";
import "./styles.css";
export default function Settings() {
  return (
    <div className="settings">
      <header>
        <h1>Hello World</h1>
        <Link
          to={{
            pathname: "/settings",
            search: "?sort=date",
            hash: "#hash"
          }}
        >
          设置
        </Link>
      </header>
    </div>
  );
}

点击“设置”时,路由就变成了:/settings?sort=date#hash

9.webp.jpg

(4)Routes

下面来看看如何将路由映射为对应的页面(组件)。首先需要从 react-router-dom 中导入一个名为 Routes 的组件,它将包含可以在页面特定部分显示的所有不同的路由。

index.tsx 中进行如下修改:

import { NavLink, Routes, Route } from "react-router-dom";
import Product from "./Product";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <header>
        <h1>Hello World</h1>
      </header>
      <nav>
        <NavLink to="">首页</NavLink>
        <NavLink to="product">产品</NavLink>
        <NavLink to="about">关于</NavLink>
      </nav>
      <Routes>
      </Routes>
    </div>
  );
}

我们需要在 Routes 组件中使用 Route 组件来定义所有路由。该组件接受两个 props

Route 组件用于将应用的位置映射到不同的 React 组件。例如,当用户导航到 /product 路径时呈现 Product 组件,可以这样来写:

import { NavLink, Routes, Route } from "react-router-dom";
import Product from "./Product";
import About from "./About";
import Home from "./Home";
import Error from "./Error";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <header>
        <h1>Hello World</h1>
      </header>
      <nav>
        <NavLink to="">首页</NavLink>
        <NavLink to="product">产品</NavLink>
        <NavLink to="about">关于</NavLink>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product" element={<Product />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Error />} />
      </Routes>
    </div>
  );
}

当点击“产品”时,就会加载 Product 组件:

00000000000000000000.webp.jpg

当点击“首页”时,就会加载 Home 组件:

000000000000000.webp.jpg

当在地址栏输入一个没有定义的路由时,就会加载 Error 组件:

00000000000.webp.jpg

从上面的代码中可以看到,如果想要在所有 Route 都不匹配时就渲染 404 页面,只需将 404 页面对应的 Routepath 设置为 *

javascript

复制代码

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="product" element={<Product />} />
  <Route path="about" element={<About />} />
  <Route path="*" element={<Error />} />
</Routes>


React Router v6 完全指南(下)https://developer.aliyun.com/article/1411424

相关文章
|
9天前
|
前端开发
【掰开揉碎】React Router——React应用导航(二)
【掰开揉碎】React Router——React应用导航(二)
|
2月前
|
前端开发 JavaScript API
介绍一下React Router的工作原理。
介绍一下React Router的工作原理。
31 5
|
3月前
|
前端开发 JavaScript API
React Router v6 完全指南(下)
React Router v6 完全指南(下)
|
5月前
|
存储 前端开发 JavaScript
React Router,常用API有哪些?
React Router,常用API有哪些?
41 0
|
8月前
|
前端开发
【react 中router v6 与 v5 区别】
【react 中router v6 与 v5 区别】
|
10月前
|
前端开发
React全家桶建站教程-Router #6
React全家桶建站教程-Router #6
52 0
|
前端开发
react中router路由传参和路由的集中管理
这篇文章来记录一下 在react路由中如何进行路由传参,还有如何进行路由的集中管理
179 0
react中router路由传参和路由的集中管理
|
前端开发
react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。 ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下。
3550 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
15 1
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
21 0