react笔记（十八）—— react路由基本使用

小徐今天学习了吗
440 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（十七）—— react路由介绍中，我们学习了单页应用程序的概念、优势、React 路由介绍、模拟路由的实现等相关知识点。在本篇文章中，我们将学习到路由基本使用、Router详细说明、路由的执行过程、Link与NavLink、Switch与404等相关知识点。

路由基本使用

首先通过yarn add react-router-dom@5.3.0进行安装。react-router-dom这个包提供了三个核心的组件HashRouter、Route、Link。

使用HashRouter包裹整个应用，一个项目中只会有一个Router。

<Router>
    <div className="App">
    // … 省略页面内容
    </div>
</Router>

使用Link指定导航链接。

<Link to="/first">页面一</Link>
<Link to="/two">页面二</Link>

使用Route指定路由规则。在哪里写的Route,最终匹配到的组件就会渲染到这。

<Route path="/first" component={First}></Route>

Router详细说明

Router 组件包裹整个应用，一个 React 应用只需要使用一次。两种常用 Router：HashRouter 和 BrowserRouter。HashRouter了使用 URL 的哈希值实现http://localhost:3000/#/first。 原理是监听 window 的 hashchange 事件来实现的。推荐使用BrowserRouter：使用 H5 的 history.pushState() API 实现http://localhost:3000/first。原理是监听 window 的 popstate 事件来实现的。

import { HashRouter as Router, Route, Link } from 'react-router-dom'

<Router>

路由的执行过程

  1. 点击 Link 组件（a标签），修改了浏览器地址栏中的 url
  2. React 路由监听到地址栏 url 的变化 hashChange popState
  3. React 路由内部遍历所有 Route 组件，使用路由规则（path）与 pathname（hash）进行匹配
  4. 当路由规则（path）能够匹配地址栏中的 pathname（hash） 时，就展示该 Route 组件的内容

Link与NavLink

Link组件最终会渲染成a标签，用于指定路由导航

  • to属性，将来会渲染成a标签的href属性
  • Link组件无法实现导航的高亮效果

NavLink组件，一个更特殊的Link组件，可以用用于指定当前导航高亮

  • to属性，用于指定地址，会渲染成a标签的href属性
  • activeClass: 用于指定高亮的类名，默认active
  • exact: 精确匹配，表示必须精确匹配类名才生效

Route

默认情况下，/能够匹配任意/开始的路径。如果path是 '/',能够匹配到任意的路径，需要加上exact。如果 path 的路径匹配上了，那么就可以对应的组件就会被 render。如果 path 没有匹配上，那么会 render null。如果没有指定 path，那么一定会被渲染。exact 表示精确匹配某个路径。一般来说，如果路径配置了 /， 都需要配置 exact 属性。

<Route path="/" exact component={Home}></Route>
<Route path="/comment" component={Comment}></Route>
<Route path="/search" component={Search}></Route>
<Route component={Home}></Route>

Switch与404

通常，我们会把Route包裹在一个Switch组件中。在Switch组件中，不管有多少个路由规则匹配到了，都只会渲染第一个匹配的组件。通过Switch组件非常容易的就能实现404错误页面的提示。

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/user" component={User}/>
  <Route component={NoMatch}/>
</Switch>
avatar
文章
阅读
粉丝