react中react-router-dom的使用方法

2024-01-20 13:24:04

react中的路由介绍

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

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

React路由使用的基本

步骤

安装包.npm i react-router-dom(最近刚出6)
1. 这个包提供了三个核心组件:HashRouter, Route, Link
导入包，并使用。使用HashRouter包裹整个应用，一个项目中只会有一个Router

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

3.使用Link指定导航链接

代码演示

import React from 'react'
import ReactDom from 'react-dom'
import { HashRouter, Route, Link } from 'react-router-dom'
import Search from './pages/Search.jsx'
import Comment from './pages/Comment.jsx'
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <HashRouter>
        <Link to="/comment">评论</Link>
        <Link to="/search">搜索</Link>

        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </HashRouter>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

路由三大对象之-Router

了解两种路由

HashRouter :hash模式

BrowserRouter: history模式

内容

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

两种常用 Router：HashRouter 和 BrowserRouter

HashRouter：使用 URL 的哈希值实现
- 原理：监听 window 的 hashchange 事件来实现的
（推荐）BrowserRouter：使用 H5 的 history.pushState() API 实现
- 原理：监听 window 的 popstate 事件来实现的

代码推荐:

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

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

路由三大对象之-Link

区别

掌握Link和NavLink的区别

能使用NavLink设置高亮效果

导入测试

import { Link, NavLink } from 'react-router-dom

Link

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

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

NavLink

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

样式名称为.active可以自行修改高亮效果.

说明：

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

测试代码

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
import Search from './pages/Search.jsx'
import Comment from './pages/Comment.jsx'
export default function App () {
  return (
    <div>
      <h1>react路由基本使用-Link</h1>
      <Router>
        <div>
          Link:
          <Link to="/search">搜索</Link>
          <Link to="/comment">评论</Link>
        </div>
        <div>
          NavLink: 自带高亮类
          <NavLink to="/" exact>主页</NavLink>
          <NavLink to="/search">搜索</NavLink>
          <NavLink to="/comment">评论</NavLink>
        </div>
        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

小结

link和NavLink都用来做路由跳转。它们都用to属性来指定跳转地址
link和NavLink的区别是，NavLink指向的路径会自带一个名为.action的css类名

路由三大对象之-Route

route的作用和格式

作用：决定路由匹配规则
格式：<Route path="/xx/xx" component={组件}></Route>

匹配规则

名词约定：

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

模糊匹配规则

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

模糊匹配和精确匹配

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

示例

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route, NavLink } 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 />
        <Route path="/" component={Home} />
        <Route path="/article" component={Article} />
        <Route path="/article/123" component={ArticleDetail} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

小结

path 的说明
- 默认情况下，/能够匹配任意/开始的路径
- 如果 path 的路径匹配上了，那么就可以对应的组件就会被 render
exact ， exact 表示精确匹配某个路径
- 一般来说，如果路径配置了 /，都需要配置 exact 属性

Switch与404

Switch

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

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

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

处理404页

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

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

页面跳转 Redirect

<Redirect from="/" exact to="/comment" />

码农公寓