本文详细介绍了ReactRouterDOM的核心API，包括内置组件如BrowserRouter、Route和Switch的用法，以及如何进行路由的配置、参数传递、嵌套和重定向。着重讲解了NavLink、Switch的功能及它们在实际项目中的应用。
==========================================================================================
-
<BrowserRouter/ > -
<HashRouter/ > -
<Route/ > -
<Redirect/ > -
<Link/ > -
<NavLink/ > -
<Switch/ >
-
history对象 -
match对象 -
withRouter函数
==========================================================================
- 下载react-router-dom:
npm install react-router-dom
- 引入bootstrap.css:
-
明确好界面中的导航区、展示区
-
导航区的a标签改为Link标签
< Link to="/xxxxx">Demo< /Link >
- 展示区写Route标签进行路径的匹配
< Route path='/xxxx' component={Demo}/ >
< App/>的最外侧包裹了一个< BrowserRouter>或< HashRouter >
index.js
这里用一个标签将整个App包起来，保证使用的是同一个路由器
//引入react核心库
import React from ‘react’
//引入ReactDOM
import ReactDOM from ‘react-dom’
//
import {BrowserRouter} from ‘react-router-dom’
//引入App
import App from ‘./App’
ReactDOM.render(
,
document.getElementById(‘root’)
)
App.jsx
import React, { Component } from ‘react’
import { Link,Route } from ‘react-router-dom’
import Home from ‘./Home’
import About from ‘./About’
export default class App extends Component {
render() {
return (
React Router Demo
{/* 原生html中，靠跳转不同的页面 */}
{/* About
Home */}
{/* 在React中靠路由链接实现切换组件–编写路由链接 */}
About Home{/* 注册路由 */}
)
}
}
- 写法不同
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
- 存放位置不同
一般组件：components
路由组件：pages
- 接收到的
props不同
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: “/about”
search: “”
state: undefined
match:
params: {}
path: “/about”
url: “/about”
NavLink可以实现路由链接的高亮，通过activeClassName属性指定样式名，默认是"active"
Home
可以自己封装一个NavLink【一般组件】
import React, { Component } from ‘react’
import {NavLink} from ‘react-router-dom’
export default class MyNavLink extends Component {
render() {
// console.log(this.props);
return (
<NavLik activeClassName=“demo” className=“list-group-item” {…this.props} />
)
}
}
标签体内容是特殊的标签属性通过this.props.children可以获取标签体内容
使用
About
Home
-
通常情况下，path和component是一一对应的关系。
-
Switch可以提高路由匹配效率(单一匹配)。
这样只要匹配到了第一个就不会再往下匹配了
-
public/index.html 中 引入样式时不写
./写/（常用）【绝对路径】 -
public/index.html 中 引入样式时不写
./写%PUBLIC_URL%（常用） -
使用
HashRouter
-
默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
-
开启严格匹配：
<Route exact={true} path="/about" component={About}/> -
严格匹配
不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
具体编码：
===========================================================================
-
注册子路由时要写上父路由的path值
-
路由的匹配是按照注册路由的顺序进行的
Home/index.jsx
import React, { Component } from ‘react’
import { Route, NavLink,Redirect,Switch } from ‘react-router-dom’
import News from ‘./News’
import Message from ‘./Message’
export default class Home extends Component {
render() {
return (
我是Home的内容
News
Message
)
}
}
================================================================================
方法1. params参数
-
路由链接(携带参数)：
<Link to='/demo/test/tom/18'}>详情</Link> -
注册路由(声明接收)：
<Route path="/demo/test/:name/:age" component={Test}/> -
接收参数：
this.props.match.params
Message/index.jsx
import React, { Component } from ‘react’
import { Link, Route } from ‘react-router-dom’;
import Detail from ‘./Detail’;
export default class Message extends Component {
state = {
messageArr: [
{ id: ‘01’, title: ‘消息1’ },
{ id: ‘02’, title: ‘消息2’ },
{ id: ‘03’, title: ‘消息3’ },
]
}
render() {
const { messageArr } = this.state;
return (
{
messageArr.map((msgObj) => {
return (
-
{/* 向路由组件传递params参数 */}
{msgObj.title})
})
}
{/* 声明接收params参数 */}
)
}
}
Detail/index.jsx
import React, { Component } from ‘react’
export default class Detail extends Component {
state = {
detailData : [
{ id: ‘01’, content: ‘你好啊’ },
{ id: ‘02’, content: ‘还不错鸭’ },
{ id: ‘03’, content: ‘显示我吧’ }
]
}
render() {
console.log(this.props)
// 接收params参数
const { id, title } = this.props.match.params
const findResult= this.state.detailData.find((dataObj) => {
return dataObj.id === id
})
return (
- ID: {id }
- Title: {title }
- Content: { findResult.content}
)
}
}
方法2. search参数
-
路由链接(携带参数)：
<Link to='/demo/test?name=tom&age=18'}>详情</Link> -
注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/> -
接收参数：
this.props.location.search -
备注：获取到的
search是urlencoded编码字符串，需要借助querystring解析
import qs from ‘querystring’
let obj = {name:‘tom’, age:18}
console.log(qs.stringify(obj)) // name=tom&age=18
let str = ‘carName=Benz&price=199’
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-g5To7jZW-1712202511633)]
[外链图片转存中…(img-p6HFJiX6-1712202511633)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-Nmh4PBas-1712202511634)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
[外链图片转存中…(img-lllAsSJe-1712202511634)]
-
1516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
