React学习笔记---React路由（v5带部分v6）

最新推荐文章于 2024-07-23 16:38:04 发布
最新推荐文章于 2024-07-23 16:38:04 发布
阅读量1.3k 收藏 12
点赞数 4
分类专栏： React专栏 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/122111336
版权
本文详细介绍了React路由的理解，包括SPA的概念，前后端路由的差异，重点讲解了react-router-dom库的使用，如NavLink、Switch、嵌套路由的差异，并对比了v5和v6版本的不同，包括Redirect的替换、编程式导航的变化以及BrowserRouter与HashRouter的选择。同时，文章解决了多级路径刷新导致样式丢失的问题，并总结了v6版本的关键调整。
摘要由CSDN通过智能技术生成

React路由

一、SPA的理解

  1. 单页Web应用（single page web application，SPA）。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
  4. 数据都需要通过ajax请求获取, 并在前端异步展现。

二、路由的理解

  1. 什么是路由?
    1）. 一个路由就是一个映射关系(key:value)
    2）. key为路径, value可能是function或component

  2. 路由分类

    1. 后端路由：
      1)、 理解： value是function, 用来处理客户端提交的请求。
      2)、 注册路由： router.get(path, function(req, res))
      3)、 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

    2. 前端路由：
      1)、 浏览器端路由，value是component，用于展示页面内容。
      2)、注册路由:<Route path="/test" component={Test}>
      3)、工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

    3. 前端路由的基石

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端路由的基石_history</title>
</head>
<body>
	<a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1</a><br><br>
	<button onClick="push('/test2')">push test2</button><br><br>
	<button onClick="replace('/test3')">replace test3</button><br><br>
	<button onClick="back()">&lt;= 回退</button>
	<button onClick="forword()">前进 =&gt;</button>

	<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
	<script type="text/javascript">
		// let history = History.createBrowserHistory() //方法一，直接使用H5推出的history身上的API
		let history = History.createHashHistory() //方法二，hash值（锚点）

		function push (path) {
         
			history.push(path)
			return false
		}

		function replace (path) {
         
			history.replace(path)
		}

		function back() {
         
			history.goBack()
		}

		function forword() {
         
			history.goForward()
		}

		history.listen((location) => {
         
			console.log('请求路由路径变化了', location)
		})
	</script>
</body>
</html>

三、react-router-dom

1、理解

  1. react的一个插件库。
  2. 专门用来实现一个SPA应用。
  3. 基于react的项目基本都会用到此库。

2、相关API

1）、内置组件

1.	<BrowserRouter>
2.	<HashRouter>
3.	<Route>
4.	<Redirect>
5.	<Link>
6.	<NavLink>
7.	<Switch>

2）、其它

1.	history对象
2.	match对象
3.	withRouter函数

四、路由的基本使用

用实例进行解释，知识点全在注释中
在这里插入图片描述
index.jsx

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {
   BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

App.jsx

import React, {
    Component } from 'react'
import {
    Link, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

export default class App extends Component {
   
  render () {
   
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>React Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">

              {
   /* 原生html中，靠<a>跳转不同的页面 */}
              {
   /* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

              {
   /* 在React中靠路由链接实现切换组件--编写路由链接 */}
              <Link className="list-group-item" to="/about">About</Link>
              <Link className="list-group-item" to="/home">Home</Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {
   /* 注册路由,v6版本需要用routes包裹route,并且component变为了element,element里是一个组件,path引号里的路径不需要'/' */}
                <Route path="/about" component={
   About} />
                <Route path="/home" component={
   Home} />
                {
   /* v6版本这样写 */}
                {
   /* <Routes>
                  <Route path='home' element={<Home />} />
                  <Route path='about' element={<About />} />
                </Routes> */}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

About.jsx

import React, {
    Component } from 'react'

export default class About extends Component {
   
	render() {
   
		return (
			<h3>我是About的内容</h3>
		)
	}
}

Home.jsx

import React, {
    Component } from 'react'

export default class Home extends Component {
   
	render() {
   
		return (
			<h3>我是Home的内容</h3>
		)
	}
}

五、NavLink的使用（v5和v6有区别）

目录结构
在这里插入图片描述
index.jsx

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {
   BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

App.jsx

import React, {
    Component } from 'react'
import {
    NavLink, Route } from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' //About是路由组件
import Header from './components/Header' //Header是一般组件

export default class App extends Component {
   
  render () {
   
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">

              {
   /* 原生html中，靠<a>跳转不同的页面 */}
              {
   /* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

              {
   /* 在React中靠路由链接实现切换组件--编写路由链接 */}
              <NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink>
              <NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</NavLink>
              {
   /* 
                v6版本不能这样写，V6版本NavLink移除了activeClassName 和activeStyle  
                <NavLink style={({ isActive }) => ({ color: isActive ? '#FFF' : '#333', backgroundColor: isActive ? 'orange' : 'none' })} className="list-group-item" to="/about">About</NavLink>
                <NavLink style={({ isActive }) => ({ color: isActive ? '#FFF' : '#333', backgroundColor: isActive ? 'orange' : 'none' })} className="list-group-item " to="/home">Home</NavLink>
                或者这样写
                <NavLink className={({ isActive }) => (isActive ? " afei" : "list-group-item")} to="/about">About</NavLink>
                <NavLink className={({ isActive }) => (isActive ? " afei" : "list-group-item")} to="/home">Home</NavLink>
                注意：这里的afei是我自己定义的类名，list-group-item是bootstrap的，活跃状态就显示我定义的
                或者自己封装一个NavLink组件
              */}
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {
   /* 注册路由 */}
                <Route path="/about" component={
   About} />
                <Route path="/home" component={
   Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

components下的Header下的index.jsx

import React, {
    Component } from 'react'

export default class Header extends Component {
   
	render() {
   
		// console.log('Header组件收到的props是',this.props);
		//v6版本收不到
		return (
			<div className="page-header"><h2>React Router Demo</h2></div>
		)
	}
}

pages下的About下的index.jsx

import React, {
    Component } from 'react'

export default class About extends Component {
   
	render() {
   
		// console.log('About组件收到的props是',this.props);
		//v6版本收不到
		return (
			<h3>我是About的内容</h3>
		)
	}
}

pages下的Home下的index.jsx

import React, {
    Component } from 'react'

export default class Home extends Component {
   
	render() {
   
		return (
			<h3>我是Home的内容</h3>
		)
	}
}

六、对NavLink二次封装

其他代码和上面都一样，只有下面的与上面的有所不同

在components里新增加一个MyNavLink文件夹及组件
MyNavLink下的index.jsx

import React, {
    Component } from 'react'
import {
    NavLink } from 'react-router-dom'

export default class MyNavLink extends Component {
   
  render () {
   
    // console.log(this.props);
    return (
      <NavLink activeClassName="atguigu" className="list-group-item" {
   ...this.props}
最低0.47元/天 解锁文章
丑小鸭变黑天鹅
关注
专栏目录
react路由v6讲解
sdasadasds的博客
05-19 1773
React-Router V6版本的升级了也有段时间了，部分同学还是对v6版本有一些地方不太理解，今天咱们花10分钟来讲下v5和v6有哪些使用上的差异。 一、 React-Router V6版本 React-Router V6版本常用路由组件和hooks 组件名 作用 说明 <Routers> 一组路由 代替原有<Switch>，所有子路由都用基础的Router children来表示 <Router> 基础路由 Router是可以嵌套的，解决原有V5
使用react-router-dom v6实现路由守卫
安河桥北久铭心的博客
04-18 5177
使用react-router-dom v6实现路由守卫
react中函数组件使用v6路由
A_fork的博客
03-17 1427
在react中要是用react-router路由进行页面的跳转分为v5路由和v6路由 在有状态的组件也叫class类组件中大多数使用v5路由，而在无状态的组件也叫函数组件大多数是用v6路由，而现在市面上主流都是用的函数组件也就是v6路由。 这期咱们来讲一下函数组件中的v6路由的配置以及使用
React 基础 - 13 （路由系统 v5）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-15 381
React中使用路由系统，需要单独安装，默认没有安装 安装v5：npm i react-router-dom@5 1、引入路由组件 import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"; BrowserRouter：管理整个路由 Route：路径与组件对应关系 Link：点击切换路由 Switch： 切换之后展...
React - 路由 - V6
weixin_50206068的博客
12-30 532
简单明了，react-router-dom v6
React 路由篇(v6)
最新发布
Lil_y1的博客
07-23 1332
本文是根据尚硅谷react课程React Router Dom v6篇的总结笔记
react-router-dom5.0的路由拦截.rar
06-15
react-router-dom5.0的路由拦截 守卫 demo 封装好的 可以直接套用,方便研究使用,直接移植,对着修改,安装 redux等就行,免 c币 下载地址 http://download.lllomh.com/cliect/#/product/J615178556091098
react-router-dom v6 的嵌套路由和路由参数传递
m0_50163856的博客
02-07 1365
安装 npm install react-router-dom 修改index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {BrowserRouter} from 'react-router-dom' ReactDOM.render( <React.StrictMode> <BrowserRouter>..
react-live-route:增强的react-router-v45 Route使路由保持活动状态
05-06
react-router-v4路由组件的增强版本，它使路由组件在不匹配的路径上保持活动状态，并在匹配路径上将其完全还原。 文档 反馈 随时打开一个寻求帮助或进行讨论。 如果需要详细的代码问题帮助，请分叉最小演示以提供...
26 react v6 路由
weixin_45842460的博客
01-16 239
path: "/", //重定向路径 replace 不产生路由记录。// 引入Navigate 重定向组件。跳转不产生路由历史记录。
react-router-v6:在此仓库中，我了解了React Router v6的一些基础知识
04-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递性依赖项（webpa
React router路由v6详解
好川的博客
10-16 5615
React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载
react-router-dom关于V5以及V6版本实现路由鉴权的控制
sunwanfulove的博客
10-11 1178
react-router-dom关于不同版本的教程怎么实现路由导航，路由鉴权。
React-Router v6基本使用
qq_33816425的博客
11-30 1344
一、路由简介 React Router是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。 二、基本使用 1、通过 npx create-react-app my-app 创建react项目，安装react-router或者react-router-dom npm install react-router-dom --save 2、配置路由 在src文件夹下创建路由配置文件index...
React Router V5:使用HOC组件实现路由拦截
Bennett_G博客
03-13 585
在Web应用程序中，需要对一些页面进行访问限制，只允许已经登录的用户访问受保护的页面。React Router可以通过使用高阶组件（Higher-order Components，HOC）实现路由拦截。本文将介绍如何使用React Router实现路由拦截功能。
React 路由 V5（完整版）
qq_38980678的博客
06-30 5370
一.什么是路由？ 指路径url与不同的页面和内容进行相应匹配，可以友好的解决Component到url之间的同步映射关系 二.路由的使用 (1).下载react-router 指令（指定v5版本）：npm install react-router-dom@5 (2).app内引入 (3).路由组件封装 为了方便对路由管理，可单独封装起来 创建一个router文件夹 –router.js 在app文件中引入： 三.路由重定向 在根路径下，或者不存在的路径会自动匹配到Redirect指定的路径（模糊匹配） 解
react路由（v5版本）：移动端底部导航
qq_53008791的博客
08-12 498
react项目中——移动端底部导航的实现
react组件权限控制+路由权限+路由懒加载
weixin_43954090的博客
02-21 4489
利用react的contextapi来实现权限控制 permission.js import React, { useEffect, useState, useContext } from "react" const PermissionContext = React.createContext({ permission: [] }); const getPermission = (permissionList) => { console.log('请求数据') retur
React 路由篇(v5)
Lil_y1的博客
07-22 833
通过学习尚硅谷react课程React Router Dom v5篇的一些小笔记
React-Router-DOM：实现嵌套路由详解
"在本文中，我们将深入探讨如何在React应用中使用`react-router-dom`实现嵌套路由。首先，我们从入口文件`index.js`开始，这是一个典型的React应用启动点，导入了必要的React库、ReactDOM、主组件`App`以及Babel-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值