React - router - dom 详解

React 路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。 React路由和Vue路由其实没有区别。前端路由是一套映射规则，在React中，是 URL路径与组

cbyr

28091人浏览 · 2021-11-17 21:31:03

cbyr · 2021-11-17 21:31:03 发布

React 路由介绍

现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。 React路由和Vue路由其实没有区别。

前端路由是一套映射规则，在React中，是 URL路径 与组件的对应关系
使用 React 路由简单来说就是：配置路径和组件（配对）

1，React路由使用的基本：

步骤：

安装包：npm i react-router-dom@5.3.0（react-router-dom现在发了6.0版本，目前不稳定。尽量使用5.0版本），这个包提供了三个核心的组件:HashRouter, Route, Link
导入包，并使用：import { HashRouter, Route, Link } from 'react-router-dom' ，用HashRouter包裹整个应用，一个项目中只会有一个Router
使用Link指定导航链接，用Route指定路由规则(哪个路径展示哪个组件)、

简单展示：

import React from 'react'
import ReactDom from 'react-dom'
import { HashRouter, Route, Link } from 'react-router-dom'
import Frend from './pages/Frend'
import My from './pages/My'
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <HashRouter>
        <Link to="/Frend">评论</Link>
        <br />
        <br />
        <br />
        <Link to="/My">搜索</Link>
        <br />
        <br />
        <br />
            // 跳转Frend组件
        <Route path="/Frend" component={Frend} />
            // 跳转My组件    
        <Route path="/My" component={My} />
      </HashRouter>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

效果图：

React路由三大对象之 Router、Link、Route

1， Router 组件：包裹整个应用，一个 React 应用只需要使用一次

两种常用路由：

HashRouter :hash模式

BrowserRouter: history模式

原理：（推荐 BrowserRouter）

HashRouter：使用 URL 的 hash 实现
- 原理：监听 window 的 hashchange 事件来实现的（http://localhost:3000/#/first）
BrowserRouter：使用 H5 的 history.pushState() API 实现（http://localhost:3000/first）
- 原理：监听 window 的 popstate 事件来实现的

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


//使用es6的导入重命名来统一名字： 无论导入的是哪个路由对象，都叫Router
<Router>

2， Link 或者 NavLink ：最终会渲染成a标签，用于指定路由导航

Link组件：

to 属性，将来会渲染成a标签的href属性
Link 组件无法展示哪个link处于选中的效果

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

to属性，用于指定地址，会渲染成a标签的href属性
activeClassName: 用于指定高亮的类名，默认active。一般不去修改。
exact: 精确匹配，表示必须地址栏和to的属性值 精确匹配类名才生效

return (
    <div>
      <h1>react路由基本使用</h1>
      <HashRouter>
        <Link to="/Frend">评论</Link>
        <br />
        <br />
        <br />
        <Link to="/My">搜索</Link>
        <br />
        <br />
        <br />
        <NavLink to="/find">发现</NavLink>
        <br />
        <br />
        <br />
        <Route path="/find" component={Find} />
        <Route path="/Frend" component={Frend} />
        <Route path="/My" component={My} />
      </HashRouter>
    </div>
  )

这两个标签的区别就是 NavLink指向的路径会自带一个名为 active 的css类名

3，Route：决定路由匹配规则

格式：<Route path="/xx/xx" component={组件}></Route>

匹配规则

名词约定：

path： Route组件中path属性的值
pathname: 指的如下格式
- link组件中to的属性值
- 地址栏中的地址

模糊匹配规则

只要pathname以path开头就算匹配成功
匹配成功就加载对应组件；
整个匹配过程是逐一匹配，一个匹配成功了，并不会停止匹配。

模糊匹配和精确匹配

默认是模糊匹配的
补充exact可以设置成精确匹配

    <Router>
        <NavLink to="/">主页</NavLink>&nbsp;
        <NavLink to="/article">文章列表页</NavLink>&nbsp;
        <NavLink to="/article/123">文章详情页-123</NavLink>&nbsp;
        <hr />
        <Route path="/" component={Home} />
        <Route path="/article" component={Article} />

            // exact 设置精确匹配
        <Route path="/article/123" exact  component={ArticleDetail} />
    </Router>

Switch与404

Switch

用Switch组件包裹多个Route组件。

在Switch组件下，不管有多少个Route的路由规则匹配成功，都只会渲染第一个匹配的组件

示例：

import React from 'react'
import ReactDom from 'react-dom'
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch
} from 'react-router-dom'
const Home = () => <div>主页</div>
const Article = () => <div>文章列表页</div>
const ArticleDetail = () => <div>文章详情页</div>
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <Router>
        <NavLink to="/">主页</NavLink>&nbsp;
        <NavLink to="/article">文章列表页</NavLink>&nbsp;
        <NavLink to="/article/123">文章详情页-123</NavLink>&nbsp;
        <hr />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
        </Switch>
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

处理404页

思路：不设置path属性，将404页对应的路由放在switch内部的最后位置


        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
          <Route component={Page404} />
        </Switch>

页面跳转 Redirect ：设置默认显示组件

代码实例：

return (
    <div>
      <h1>react路由基本使用</h1>
      <HashRouter>
     		<Switch>
          <Link to="/comment">评论</Link>
          <Link to="/search">搜索</Link>


          <Route path="/comment" component={Comment} />
          <Route path="/search" component={Search} />
             {/* <Route path="/" component={Comment} /> */}
          <Redirect from="/" to="/comment" />
        </Switch>
      </HashRouter>
    </div>
  )