当前位置：首页 > news >正文

06-React的路由

news 2025/9/14 7:47:54

06-React的路由

1.相关理解

1).SPA的理解

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

2).路由的理解

a.什么是路由?

一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component

b.路由分类

①.后端路由：

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

②.前端路由：

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

3).react-router-dom的理解

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

2. react基本路由使用

需求：

1).实现：

a.BrowserRouter，Link，Route三个API的基本使用

完成组件的静态结构，明确好界面中的导航区、展示区

//App.jsx
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 active" href="./about.html">About</a><a className="list-group-item" href="./home.html">Home</a> </div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><About/><Home/></div></div></div></div></div>)}
}

//Header.jsx
export default class Header extends Component {render() {return (<div className="page-header"><h2>React Router Demo</h2></div>)}
}

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

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

引入并使用路由API注册路由

导航区的a标签改为Link标签

<Link to="/xxxxx">Demo</Link>

展示区写Route标签进行路径的匹配

<Route path='/xxxx'component={Demo}/>

import { Link, BrowserRouter, Route } from 'react-router-dom'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 active" href="./about.html">About</a><a className="list-group-item" href="./home.html">Home</a> */}{/* 在React中靠路由链接实现切换组件--编写路由链接 */}{/* <BrowserRouter> */}<Link className="list-group-item" to="/about">About</Link><Link className="list-group-item" to="/home">Home</Link>{/* </BrowserRouter> */}</div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}{/* <BrowserRouter> */}<Route path="/about" component={About} /><Route path="/home" component={Home} />{/* </BrowserRouter> */}</div></div></div></div></div>)}
}

注意点：

是两种路由模式中的一种，需要将路由链接和注册路由的标签写在同一个标签中产生关联，为了简化后期编码的便利，一般都是直接用标签将父组件包裹起来，这样整个应用中子组件都可以产生路由关联

import {BrowserRouter} from 'react-router-dom'
createRoot(document.getElementById('root')).render(<BrowserRouter><App/></BrowserRouter>)

b.路由组件与一般组件

将案例说，Header组件为一般组件，About和Home组件为路由组件，所以可以将About和Home组件放在一个名为pages文件夹中，这个文件夹专门用来存放路由组件文件，components文件夹用来存放一般组件的文件

路由组件与一般组件的区别：

1.写法不同：
一般组件：

<Demo/>

路由组件：

<Route path:="/demo"component={Demo}/>

2.存放位置不同：
一般组件：components
路由组件：pages
3.接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性:

history:go:f go(n)goBack:f goBack()goForward:f goForward()push:f push(path,state)replace:f replace(path,state)
location:pathname:"/about"search:"state:undefined 
match:params:{}path:"/about"url:"/about"

//About.jsx
export default class About extends Component {render() {console.log('About路由组件：',this.props);return (<h3>我是About的内容</h3>)}
}

c.NavLink与封装NavLink

需求：当点击某个组件链接时，该链接会高亮。

实现：

原生JS：通过链接元素的点击事件将高亮样式active加到该链接元素上
CSS：通过元素的:hover伪类选择器为元素添加高亮效果
Vue：通过@click事件通过判断条件将高亮样式active加到该链接元素上
React：通过NavLink标签实现，且该标签的默认高亮样式名就为active

<!-- index.html -->
<head><meta charset="UTF-8"><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/bootstrap.css"><style>.atguigu{background-color: rgb(209, 137, 4) !important;color: white !important;}</style><title>08</title>
</head>
<body><div id="root"></div>
</body>
</html>

//App.jsx
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">{/* NavLink可以实现路由链接的高亮通过activeClassName指定样式名 */}<NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink><NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</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>)}
}

封装NavLink

可以通过封装NavLink的方式来减少几个NavLink标签实际应用时重复相同的内容

//MyNacLink.jsx
import { NavLink } from 'react-router-dom'
export default class MyNacLink extends Component {render() {const {to,title}=this.prosp  return (<NavLink activeClassName="atguigu" className="list-group-item" to={to}>{title}</NavLink>)}
}

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"><MyNacLink to="/about" title="About"/><MyNacLink to="/home" title="Home"/> </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>)}
}

不足之处在于假如在MyNacLink组件中传递了太多的数值，那么MyNacLink组件取值将会变得繁琐，比如

<MyNacLink to="/about" title="About" a="1" b="2"/>

通过解构赋值的方式将数值从this.props中取很繁琐：
title值需要另外通过{}取

export default class MyNacLink extends Component {render() {const {to,title,a,b}=this.propsreturn (<NavLink activeClassName="atguigu" className="list-group-item" to={to} a={a} b={b}>{title}</NavLink>)}
}

假如将title值写在标签体中，这样就可以通过this.props.children可以获取标签体内容：

//标签体内容是一个特殊的标签属性 
<MyNacLink to="/about" a="1" b="2">About</MyNacLink>

export default class MyNacLink extends Component {render() {console.log(this.props);// const {to,title}=this.propsreturn (<NavLink activeClassName="atguigu" className="list-group-item" to={to}>{title}</NavLink>)}
}

这样就可以通过...运算符将直接将this.props中所有的值都传递到NavLink组件中：

export default class MyNacLink extends Component {render() {return (<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}>{title}</NavLink>)}
}

d.Switch的使用

通常情况下，path和component是一一对应的关系，但是不免有时候会重复path，这样会造成同时显示两个组件的内容:

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"><MyNacLink to="/about" a="1" b="2">About</MyNacLink><MyNacLink to="/home">Home</MyNacLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Route path="/about" component={About} /><Route path="/home" component={Home} /><Route path="/home" component={Text} /></div></div></div></div></div>)}
}

可以使用Switch来解决这个问题，Switch可以提高路由匹配效率（单一匹配）。

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"><MyNacLink to="/about" a="1" b="2">About</MyNacLink><MyNacLink to="/home">Home</MyNacLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Switch><Route path="/about" component={About} /><Route path="/home" component={Home} /><Route path="/home" component={Text} /></Switch></div></div></div></div></div>)}
}

e.解决多级路径刷新页面样式丢失的问题

假如在路由匹配路径为多重，那么当网页刷新时就会出现样式丢失的问题：

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"><MyNacLink to="/atguigu/about" a="1" b="2">About</MyNacLink><MyNacLink to="/atguigu/home">Home</MyNacLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Switch><Route path="/atguigu/about" component={About} /><Route path="/atguigu/home" component={Home} /></Switch></div></div></div></div></div>)}
}

问题：为什么会造成样式的丢失呢？

回答：在刷新后，请求的bootstrap.css的响应内容发现了变化：

刷新前请求的bootstrap.css的响应内容为一段CSS样式代码：

刷新后请求的bootstrap.css的响应内容为一段HTML代码，而且返回的HTML网页内容就是当前react脚手架项目的index.html文件的内容：

**分析原因：**刷新前后请求bootstrap.css的路径不一样

刷新前的路径：

刷新后的路径：

可以看到脚手架在请求bootstrap.css资源时，错误的将/atguigu也当成了请求路径的一部分，因此导致请求不到正确的样式资源。

在脚手架中有一个配置，当脚手架请求不到正确内容时，会将根目录public下的index.html文件返回作为响应

解决方案：

将引入样式文件的相对路径进行修改

<link rel="stylesheet" href="/css/bootstrap.css">

在引入样式文件的路径中添加%PUBLIC_URL%

<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">

将路由模式修改为HashRouter

import { HashRouter } from "react-router-dom";
createRoot(document.getElementById('root')).render(<HashRouter><App/></HashRouter>)

f.路由的严格匹配与模糊匹配

在路由匹配中有严格匹配与模糊匹配两种模式，默认是模糊模式，因此可以在路由匹配正确路径后面添加其他内容：

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"><MyNacLink to="/about" a="1" b="2">About</MyNacLink><MyNacLink to="/home/a/b">Home</MyNacLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Switch><Route exact path="/about" component={About} /><Route exact path="/home" component={Home} /></Switch></div></div></div></div></div>)}
}

需要注意：模糊匹配只会匹配路径的第一个路径字段，如果第一个匹配不上也不会往后匹配了

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"><MyNacLink to="/about" a="1" b="2">About</MyNacLink><MyNacLink to="/a/home/b">Home</MyNacLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Switch><Route path="/about" component={About} /><Route path="/home" component={Home} /></Switch></div></div></div></div></div>)}
}

开启严格模式：

<Route exact={true}path="/about"component={About}

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"><MyNacLink to="/about" a="1" b="2">About</MyNacLink><MyNacLink to="/home/a/b">Home</MyNacLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Switch><Route exact path="/about" component={About} /><Route exact path="/home" component={Home} /></Switch></div></div></div></div></div>)}
}

默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：<Route exact={true}path="/about"component={About}/>
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

g.Redirect重定向

当需要组件一加载就显示某个路由组件时，可以使用Redirect重定向到指定的路由组件

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"><MyNacLink to="/about">About</MyNacLink><MyNacLink to="/home">Home</MyNacLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Switch><Route path="/about" component={About} /><Route path="/home" component={Home} /><Redirect to="/home"/></Switch></div></div></div></div></div>)}
}

3.路由传递参数

1).嵌套路由

需求：

实现：

注册子路由时要写上父路由的path值
路由的匹配是按照注册路由的顺序进行的

//Home.js
export default class Home extends Component {render() {return (<div><h2>Home组件内容</h2><div><ul className="nav nav-tabs"><li><MyNavLink to="/home/news">News</MyNavLink></li><li><MyNavLink to="/home/message">Message</MyNavLink></li></ul><Switch><Route path="/home/news" component={News} /><Route path="/home/message" component={Message} /><Redirect to="/home/news"/></Switch></div></div>)}
}

2).向路由组件传递参数

需求：

a.向路由传递params参数

路由链接（携带参数）：

<Link to='/demo/test/tom/18'}>详情</Link>

注册路由(声明接收)：

<Route path="/demo/test/:name/:age"component={Test}/>

export default class Message extends Component {state = {messageArr: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' },]}render() {const { messageArr } = this.statereturn (<div><ul>{messageArr.map(msgObj => {return (<li key={msgObj.id}>{/* 向路由组件传递params参数 */}<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;</li>)})}</ul><hr /><Route path="/home/message/detail/:id/:title" component={Detail}/></div>)}
}

接收参数：

const{id,title}=this.props.match.params

const DetailData = [{ id: '001', content: "你好，中国" },{ id: '002', content: "你好，比奇堡" },{ id: "003", content: "你好，海绵宝宝" }
]
export default class Detail extends Component {render() {// 接收params参数console.log(this.props);const { id, title } = this.props.match.paramsconst findResult = DetailData.find((detailObj) => {return detailObj.id === id})return (<ul><li>ID:{id}</li><li>TITLE:{title}</li><li>CONTENT:{findResult.content}</li></ul>)}
}

b.向路由传递search参数

路由链接（携带参数）：

<Link to='/demo/test?name:=tom&age=18'}>详情</Link>

注册路由（无需声明，正常注册即可）：

<Route path="/demo/test"component={Test}/>

export default class Message extends Component {state = {messageArr: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' },]}render() {const { messageArr } = this.statereturn (<div><ul>{messageArr.map(msgObj => {return (<li key={msgObj.id}>{/* 向路由组件传递search参数 */}<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;</li>)})}</ul><hr />{/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}{/* search参数无需声明接收，正常注册路由即可 */}<Route path="/home/message/detail" component={Detail}/></div>)}
}

接收参数：
```
const{search}=this.props.location
```

备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

import qs from "query-string"
console.log(qs.stringify({name:"tom",age:18}));

urlencoded编码方式：
let obj={name:"tom",age:18} => name=tom&age=18 key=value&key=value

const DetailData = [{ id: '001', content: "你好，中国" },{ id: '002', content: "你好，比奇堡" },{ id: "003", content: "你好，海绵宝宝" }
]
export default class Detail extends Component {render() {// 接收search参数console.log(this.props);const {search}=this.props.location//   search.slice(1):去掉字符串前的？const {id,title}=qs.parse(search.slice(1))const findResult = DetailData.find((detailObj) => {return detailObj.id === id})return (<ul><li>ID:{id}</li><li>TITLE:{title}</li><li>CONTENT:{findResult.content}</li></ul>)}
}

c.向路由传递state参数

路由链接（携带参数）：

<Link to={{path:'/demo/test',state:{name:'tom',age:18})}>详情</Link>

注册路由（无需声明，正常注册即可）：

<Route path:="/demo/test" component={Test}/>

export default class Message extends Component {state = {messageArr: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' },]}render() {const { messageArr } = this.statereturn (<div><ul>{messageArr.map(msgObj => {return (<li key={msgObj.id}>{/* 向路由组件传递state参数 */}<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link></li>)})}</ul><hr />{/* state参数无需声明接收，正常注册路由即可 */}<Route path="/home/message/detail" component={Detail}/></div>)}
}

接收参数：this,props.location.state

const DetailData = [{ id: '001', content: "你好，中国" },{ id: '002', content: "你好，比奇堡" },{ id: "003", content: "你好，海绵宝宝" }
]
export default class Detail extends Component {render() {// 接收state参数// 切记需要添加 ||{} 以免引起报错   const {id,title}=this.props.location.state||{}const findResult = DetailData.find((detailObj) => {return detailObj.id === id})||{}return (<ul><li>ID:{id}</li><li>TITLE:{title}</li><li>CONTENT:{findResult.content}</li></ul>)}
}

备注：刷新也可以保留住参数

3).push模式和replace模式

push模式相当于history模式，是在浏览器上一条浏览记录添加覆盖一条新的浏览记录
replace模式相当于hash模式，是将浏览器上一条替换成新的浏览记录

在注册路由时开启replace模式：

<Route replace={true} path="/home/message/detail" component={Detail}/>

4.编程式路由导航

当需要在事件中进行跳转路由时，就可以使用编程式路由。

我们知道在路由组件的props中包含有history、location、match，其中history中的go、goBack、goForward、push、replace三个方法就可以供我们实现编程式路由导航

a.基本使用

export default class Message extends Component {state = {messageArr: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' },]}replaceShow = (id, title) => {this.props.history.replace(`/home/message/detail`)}pushShow = () => {this.props.history.push(`/home/message/detail`)}back=()=>{this.props.history.goBack()}forward=()=>{this.props.history.goForward()}render() {console.log(this.props);const { messageArr } = this.statereturn (<div><ul>{messageArr.map(msgObj => {return (<li key={msgObj.id}><Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>&nbsp;<button onClick={() => this.pushShow()}>push查看</button>&nbsp;<button onClick={() => this.replaceShow()}>replace查看</button></li>)})}</ul><hr /><Route path="/home/message/detail" component={Detail} /><button onClick={this.back}>回退</button><button onClick={this.forward}>前进</button></div>)}
}

b.路由跳转+传递参数

①.传递param参数

export default class Message extends Component {state = {messageArr: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' },]}replaceShow = (id, title) => {// replace跳转+传递param参数this.props.history.replace(`/home/message/detail/${id}/${title}`)}pushShow = (id, title) => {// push跳转+传递param参数this.props.history.push(`/home/message/detail/${id}/${title}`)}back=()=>{this.props.history.goBack()}forward=()=>{this.props.history.goForward()}render() {console.log(this.props);const { messageArr } = this.statereturn (<div><ul>{messageArr.map(msgObj => {return (<li key={msgObj.id}>{/* 向路由组件传递params参数 */}{<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;&nbsp;<button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>&nbsp;<button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button> </li>)})}</ul><hr /><Route path="/home/message/detail/:id/:title" component={Detail}/> <button onClick={this.back}>回退</button><button onClick={this.forward}>前进</button></div>)}
}

②.传递query参数

export default class Message extends Component {state = {messageArr: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' },]}replaceShow = (id, title) => {// replace跳转+传递query参数this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)}pushShow = (id, title) => {// push跳转+传递query参数this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)}back=()=>{this.props.history.goBack()}forward=()=>{this.props.history.goForward()}render() {console.log(this.props);const { messageArr } = this.statereturn (<div><ul>{messageArr.map(msgObj => {return (<li key={msgObj.id}>{/* 向路由组件传递search参数 */}<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;&nbsp;<button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>&nbsp;<button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button> </li>)})}</ul><hr /><Route path="/home/message/detail" component={Detail}/> <button onClick={this.back}>回退</button><button onClick={this.forward}>前进</button></div>)}
}

③.传递state参数

export default class Message extends Component {state = {messageArr: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' },]}replaceShow = (id, title) => {// replace跳转+传递state参数this.props.history.replace(`/home/message/detail`, { id, title })}pushShow = (id, title) => {// push跳转+传递state参数this.props.history.push(`/home/message/detail`, { id, title })}back=()=>{this.props.history.goBack()}forward=()=>{this.props.history.goForward()}render() {console.log(this.props);const { messageArr } = this.statereturn (<div><ul>{messageArr.map(msgObj => {return (<li key={msgObj.id}>{/* 向路由组件传递state参数 */}<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>&nbsp;<button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>&nbsp;<button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button></li>)})}</ul><hr /><Route path="/home/message/detail" component={Detail} /><button onClick={this.back}>回退</button><button onClick={this.forward}>前进</button></div>)}
}

c.withRouter

如果需要使一般路由也有跟路由组件一样的props属性以此来实现一些效果，比如浏览记录的回退和前进，可以使用withRouter让一般组件具备路由组件所特有的API

//Header.jsx
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'class Header extends Component {back = () => {this.props.history.goBack()}forward = () => {this.props.history.goForward()}render() {return (<div className="page-header"><h2>React Router Demo</h2>&nbsp;<button onClick={this.back}>后退</button>&nbsp;<button onClick={this.forward}>前进</button></div>)}
}
export default withRouter(Header)

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
withRouter的返回值是一个新组件

5.BrowserRouter与HashRouter的区别

底层原理不一样：
- BrowserRouter使用的是H5的nistory API,不兼容IE9及以下版本。
- HashRouter使用的是URL的哈希值。
url表现形式不一样
- BrowserRouter的路径中没有#，例如：loca1host:3009/demo/test
- HashRouter的路径包含#，例如：localhost:3o00/#/demo/test
刷新后对路由state参数的影响
- BrowserRouter没有任何影响，因为state保存在history对象中。
- HashRouter刷新后会导致路由state参数的丢失。
备注：HashRouter可以用于解决一些路径错误相关的问题。

06-React的路由

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

编程日记 2023/10/16 21:11:27

虹科方案 | 加州理工学院利用HK-TrueNAS开展地震研究

一、客户背景加州理工学院(CalTech)是世界顶尖的理工类科学研究型学府之一。加州理工学院地震实验室是加州理工学院地质与行星科学部(GPS)的一个分支机构，成立于1921年，自20年代以来一直是世界地震学研究中心，并且几十年来一直是媒体对大地…...

编程日记 2023/10/16 21:10:26

宝塔面板部署express以及MySql项目

第一次在宝塔面板上部署express和MySql项目，部署过程一直跑不通接口，特此记录一下。在部署的时候，建议第一步把数据库MySql给跑通，中间好多原因是由于数据库的原因给引起的。一.连接数据库 （1）在宝塔面…...

编程日记 2023/10/16 21:09:25

联盟链学习笔记-网络的创建

联盟链学习笔记初始网络下图是初始网络网络N的参考图排序服务在定义网络 N 的时候，第一件事情就是定义一个排序服务O4。O4 最初被配置并且由组织 R4 的一个管理员来启动，并且由 R4 管理。配置 NC4 包含了描述网络管理能力初始集合的规则。最初在…...

编程日记 2023/10/16 21:08:24

System.Drawing.Common.Bitmap跨平台的替代方案

使用SkiaSharp SkiaSharp是Skia Graphics Library的.Net跨平台实现，它可以在Windows，macOS，Linux，iOS，Android和其他平台上使用。例如需要Linux版，则安装第一个和第四个： 以下是使用SkiaShar…...

编程日记 2023/10/16 21:07:23

深入理解 Java 泛型

没有泛型是怎样的了解点 Java 历史的都知道，泛型是从 JDK 1.5 版本添加的特性，在 JDK1.5 之前，Java 很多特性都是没有的例如：泛型、注解、自动装箱和拆箱、可变参数。在介绍泛型之前，我们先来看看，如果没有泛型的世界是怎么样的。假设有一个 List，我只想把 String 类…...

编程日记 2023/10/16 21:06:22

【基础篇】七、Flink核心概念

文章目录 1、并行度2、并行度的设置3、算子链4、禁用算子链5、任务槽6、任务槽和并行度的关系 1、并行度要处理的数据量很多时，可以把一个算子的操作（比如前面demo里的flatMap、sum），"复制"多份到多个节点&#xff0c…...

编程日记 2023/10/16 21:04:19

06-Scala面向对象

面向对象编程 Scala是一门完全面向对象的语言，摒弃了Java中很多不是面向对象的语法。虽然如此，但其面向对象思想和 Java的面向对象思想还是一致的 Scala包 1）基本语法 Scala中基本的package包语法和 Java 完全一致例如&#xf…...

编程日记 2023/10/16 21:03:18

【设计模式】单例模式、“多例模式”的实现以及对单例的一些思考

文章目录 1.概述2.单例模式实现代码2.1.饿汉式单例2.2.懒汉式单例2.3.双检锁单例2.4.静态内部类单例2.5.枚举单例 3.对单例的一些思考3.1.是否需要严格的禁止单例被破坏？3.2.懒汉式真的比饿汉式更佳吗？3.3.单例存在的问题 4.其他作用范围的单例模式4.1.线…...

编程日记 2023/10/16 21:02:17

idea 2022 一个工作空间下导入git项目后无法导入第二个git项目

idea 2022 一个工作空间下导入git项目后无法导入第二个git项目如图所示我导入了一个git项目后，菜单栏出现了一个git按钮找不到导入git项目的按钮了方式1、通过idea设置打开全局设置如下图把git先改为none，保存保存后就可以看到 VCS按钮导入…...

编程日记 2023/10/16 21:01:14

泛在电力物联网的关键技术与未来发展策略-安科瑞黄安南

摘要: 文章分析了泛在电力物联网的内涵及其主要特征，针对泛在电力物联网的建设目标、基本构架以及关键技术与未来发展策略进行综合探讨，期待得到专业人士的指点。关键词: 泛在电力物联网， 网络规划， 网络发展随着能源革命的不…...

编程日记 2023/10/16 21:00:13

iWall：支持自定义的Mac动态壁纸软件

iWall Mac是一款动态壁纸软件，它可以使用任何格式的漂亮视频（无须转换）、图片、动画、Flash、gif、swf、程序、网页、网站做为您的动态壁纸、动态桌面，并且可以进行交互。这款软件功能多、使用简单、体积小巧、不占用资源、运行…...

编程日记 2023/10/16 20:59:12

【Docker 内核详解】namespace 资源隔离（四）：Mount namespace Network namespace

【Docker 内核详解 - namespace 资源隔离】系列包含： namespace 资源隔离（一）：进行 namespace API 操作的 4 种方式namespace 资源隔离（二）：UTS namespace & IPC namespacenamespace 资源隔…...

编程日记 2023/10/16 20:58:11

STM32简介

STM32是ST公司基于ARM Cortex-M内核开发的32位微控制器，常应用在嵌入式领域如： 智能车（用stm32做寻迹小车，读取光电传感器或者摄像头数据，然后驱动电机前进和转弯）； 无人机（用stm3…...

编程日记 2023/10/16 20:57:10

Yum安装JDK11

一、安装命令 ： yum install java-11-openjdk二、执行以下命令来查看 JDK 11 的安装信息： yum list installed | grep java-11-openjdk三、找到 JDK 11 的软件包名称（使用以下命令来查询软件包的安装位置）： rpm -ql…...

编程日记 2023/10/16 20:56:09

[HNCTF 2022 WEEK2]ez_ssrf题目解析

这题主要是引入ssrf这个漏洞攻击，本质上没有更深入的考察本题是需要我们去伪造一个ssrf的请求头去绕过题目开始给了我们信息让我们去访问index.php fsockopen函数触发ssrf fsockopen() 函数建立与指定主机和端口的 socket 连接。然后，它将传入的 bas…...

编程日记 2023/10/16 20:55:08

OpenFOAM: twoPhaseEulerFoam解读

twoPhaseEulerFoam全解读之一(转载) 本系列将对OpenFOAM-2.1.1 中的 twoPhaseEulerFoam 求解器进行完全解读，共分三部分：方程推导，代码解读，补充说明。本篇进行方程推导，详细介绍如果从双流体模型出发得到 twoPhaseEu…...

编程日记 2023/10/16 20:54:07

ffmpeg跨平台arm编译-ubuntu

目录 1. 安装必要的编译器2. 安装必要的依赖项3. 配置编译选项4. 编译安装 1. 安装必要的编译器 32位系统： sudo apt-get update sudo apt-get install gcc-arm-linux-gnueabihf sudo apt-get install g-arm-linux-gnueabihf64位系统： sudo apt-get u…...

编程日记 2023/10/16 20:53:07

Vue 网络处理 - axios 异步请求的使用，请求响应拦截器

目录一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用…...

编程日记 2023/10/16 20:52:06

单目3D目标检测——MonoDLE 模型训练 | 模型推理

本文分享 MonoDLE 的模型训练、模型推理、可视化3D检测结果。模型原理，参考我这篇博客：【论文解读】单目3D目标检测 MonoDLE（CVPR2021）_一颗小树x的博客-CSDN博客源码地址：https://github.com/xinzhuma/monodle 目…...

编程日记 2023/10/16 20:50:05

wordpress后台更新后前端没变化的解决方法

使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...

编程新知 2025/9/13 20:52:53

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

超短脉冲激光自聚焦效应

前言与目录强激光引起自聚焦效应机理超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...

编程新知 2025/9/13 17:00:00

docker详细操作--未完待续

docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...

编程新知 2025/9/12 22:07:56

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/7/8 20:58:51

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...

编程新知 2025/9/13 19:14:23

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程新知 2025/9/5 21:48:13

EtherNet/IP转DeviceNet协议网关详解

一，设备主要功能疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。在自动…...

编程新知 2025/8/6 4:17:44

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/9/3 20:41:41

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/8/20 11:30:50

06-React的路由

1.相关理解

1).SPA的理解

2).路由的理解

a.什么是路由?

b.路由分类

①.后端路由：

②.前端路由：

3).react-router-dom的理解

2. react基本路由使用

1).实现：

a.BrowserRouter，Link，Route三个API的基本使用

b.路由组件与一般组件

路由组件与一般组件的区别：

c.NavLink与封装NavLink

封装NavLink

d.Switch的使用

e.解决多级路径刷新页面样式丢失的问题

f.路由的严格匹配与模糊匹配

开启严格模式：

g.Redirect重定向

3.路由传递参数

1).嵌套路由

2).向路由组件传递参数

a.向路由传递params参数

b.向路由传递search参数

c.向路由传递state参数

3).push模式和replace模式

4.编程式路由导航

a.基本使用

b.路由跳转+传递参数

①.传递param参数

②.传递query参数

③.传递state参数

c.withRouter

5.BrowserRouter与HashRouter的区别

相关文章：