react-router-dom基本使用

最新推荐文章于 2025-05-28 09:13:11 发布

hx_programmer

最新推荐文章于 2025-05-28 09:13:11 发布

阅读量569

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react 文章标签：前端 react

本文链接：https://blog.youkuaiyun.com/hx_programmer/article/details/121387247

react 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了react-router-dom的基本使用，包括安装、导入、Link和Route的配置。详细讲解了HashRouter和BrowserRouter的区别，以及如何实现导航链接、路由匹配规则、编程式导航和嵌套路由。同时，提到了处理404页面和Redirect的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-router-dom现在发了6.0版本，目前不稳定,这里我们使用5.X

基础步骤

第一步

安装包

npm i react-router-dom@5.3.0

第二步
导入包，并使用。

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

第三步
使用Link指定导航链接

使用Route指定路由规则(哪个路径展示哪个组件)

路由三大对象之-Router

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

俩种常用Router: HashRouter和 BrowserRouter(推荐)

HashRouter:
使用 URL 的哈希值实现

原理：监听 window 的 hashchange 事件来实现的

BrowserRouter:
使用 H5 的 history.pushState() API 实现

原理：监听 window 的 popstate 事件来实现的

路由三大对象之-Link
Link:指定导航链接常用有Link与NavLink

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

to属性，将来会渲染成a标签的href属性

Link组件无法展示哪个link处于选中的效果

NavLink:
NavLink组件，一个更特殊的Link组件，可以用用于指定当前导航高亮,选中项默认自带active类名

to属性，用于指定地址，会渲染成a标签的href属性

activeClassName: 用于指定高亮的类名，默认active。一般不去修改。

exact: 精确匹配，表示必须地址栏和to的属性值精确匹配类名才生效

路由三大对象之-Route
决定路由匹配规则

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

匹配规则
名词约定：

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

模糊匹配规则

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

模糊匹配和精确匹配

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

Switch

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

处理404页

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

页面跳转 Redirect

格式

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

当匹配到"/"时自动匹配到 "/comment"

示例:


import React from 'react'
import ReactDom from 'react-dom'
import { useHistory } from 'react-router'
import './04.css'
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch
} from 'react-router-dom'
import Login from './pages/Login'
import Comment from './pages/Comment'
import Search from './pages/Search'
import Page404 from './Page404'
export default function App () {
  const history = useHistory()
  console.log(history)
  return (
    <div>
      <h1>react编程式导航</h1>
      <Router>
        <NavLink to="/login">登录</NavLink>
        <NavLink to="/comment">评论</NavLink>
        <NavLink to="/search">搜索</NavLink>
        <hr />
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/comment" component={Comment} />
          <Route path="/search" component={Search} />
          <Route component={Page404} /> //兜底
        </Switch>
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

编程式导航

编程式导航的格式

第一步

import {useHistory} from 'react-router'

第二步注册

const history = useHistory()

第三步使用与vue一般无二

history.push('/find')

示例:

 import {useHistory} from 'react-router' 
 
export default function App() {
  const history = useHistory()
  
  history.push('/find')
  // 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）
  history.go(-1) 
  
  // 进入/frend，并替换记录  History中不会记录
  history.replace('/frend') 
  
}