react-router-dom基本使用

本文介绍了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>

匹配规则
名词约定:

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

模糊匹配规则

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

模糊匹配和精确匹配

  1. 默认是模糊匹配的
  2. 补充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') 
  
}

 嵌套路由的配置

就是在组件中把上面我说的在来一套但是记住Router不用在写了 

注意点

配置嵌套路由的时候,需要对路径进行处理,必须要先匹配到父级路由,才能匹配到子路由

注意 exact 使用

执行过程

  1. 点击 Link 组件(a标签),修改了浏览器地址栏中的 url
  2. React 路由监听到地址栏 url 的变化 hashChange popState
  3. React 路由内部遍历所有 Route 组件,使用路由规则(path)与 pathname(hash)进行匹配
  4. 当路由规则(path)能够匹配地址栏中的 pathname(hash) 时,就展示该 Route 组件的内容
     
### 反应路由器域与反应路由器的区别 #### 历史背景与发展 `react-router-dom` 是 `react-router` 的特定实现之一,专门用于浏览器环境中的React应用程序。随着Web开发的发展和技术栈的变化,路由库也经历了迭代更新以适应新的需求和最佳实践。 #### 主要差异点 ##### 1. 环境适配性 `react-router-dom` 特定于DOM环境中运行的应用程序,提供了针对HTML5历史API的支持以及链接处理等功能[^1]。相比之下,`react-router` 更像是一个抽象层,可以被不同平台的具体实现在之上构建,比如服务器端渲染(SSR),原生移动应用等场景下的变体如 `react-router-native`。 ##### 2. 组件集合的不同 两者都提供核心的路由管理功能,但在具体组件上有所区分: - **Link**: 在 `react-router-dom` 中存在 `<Link>` 组件来创建可点击的超链接,而在更通用版本里可能不存在此预定义组件。 - **BrowserRouter 和 HashRouter**: 这些是专门为客户端web页面设计的历史对象封装器,在 `react-router-dom` 提供了这两种方式让用户选择如何管理和同步URL状态变化;而基础版则不直接涉及这些概念[^2]. ```jsx import { BrowserRouter as Router } from 'react-router-dom'; function App() { return ( <Router> {/* 路由配置 */} </Router> ); } ``` ##### 3. API 设计哲学上的微调 虽然二者遵循相同的总体设计理念——即通过声明式的语法描述UI应该如何响应不同的路径匹配情况——但是在某些细节方面还是有细微差别。例如对于动态参数解析、嵌套路由支持等方面可能会有不同的表现形式或额外特性加入到 `react-router-dom` 当中去更好地服务于前端开发者的需求[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值