React（7）—— SPA应用 - React路由机制 - react-router-dom

2. key为路径, value可能是function或component

2.2 路由的分类

1. 前端路由

1. 理解：浏览器端路由，value是component，用于展示页面内容。

2. 注册路由: < Route path=“/test” component={Test} >

3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

2. 后端路由

1. 理解：value是function, 用来处理客户端提交的请求。

2. 注册路由：router.get(path, function(req, res))

3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

3. react-router-dom 的理解

---

1. React的一个插件库。

2. 专门用来实现一个SPA应用。

3. 基于React的项目基本都会用到此库。

二、react-router-dom相关API

==========================================================================================

1. 内置组件

---

1. <BrowserRouter/ >

2. <HashRouter/ >

3. <Route/ >

4. <Redirect/ >

5. <Link/ >

6. <NavLink/ >

7. <Switch/ >

2. 其它

---

1. history对象

2. match对象

3. withRouter函数

三、路由的使用

==========================================================================

1. 效果

---

2. 准备

---

1. 下载react-router-dom:

npm install react-router-dom

2. 引入bootstrap.css:

3. 路由的基本使用

---

1. 明确好界面中的导航区、展示区

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

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

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

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

4. < App/>的最外侧包裹了一个< BrowserRouter>或< HashRouter >

4. 实现

---

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

{/* 注册路由 */}

)

}

}

5. 路由组件与一般组件的区别

---

1. 写法不同

一般组件：<Demo/>

路由组件：<Route path="/demo" component={Demo}/>

2. 存放位置不同

一般组件：components

路由组件：pages

3. 接收到的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”

6. NavLink与封装NavLink

---

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

7. Switch的使用

---

1. 通常情况下，path和component是一一对应的关系。

2. Switch可以提高路由匹配效率(单一匹配)。

这样只要匹配到了第一个就不会再往下匹配了

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

---

1. public/index.html 中 引入样式时不写./写/ （常用）【绝对路径】

2. public/index.html 中 引入样式时不写./写%PUBLIC_URL% （常用）

3. 使用HashRouter

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

---

1. 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

2. 开启严格匹配：<Route exact={true} path="/about" component={About}/>

3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

10. Redirect的使用 【重定向】

---

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

具体编码：

四、嵌套路由使用

===========================================================================

1. 最终效果

---

2. 注意

---

1. 注册子路由时要写上父路由的path值

2. 路由的匹配是按照注册路由的顺序进行的

3. 实现

---

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. 效果

  ---

  

  2. 具体方法

  ---

  方法1. params参数

  1. 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>

  2. 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>

  3. 接收参数：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}
• # 最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  detailData.find((dataObj) => {

  return dataObj.id === id

  })

  return (
• ID: {id }
• Title: {title }
• Content: { findResult.content}
• # 最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-Exyyb8gw-1715588055542)]

  [外链图片转存中…(img-hStR3YjH-1715588055543)]

  [外链图片转存中…(img-om40FjR9-1715588055543)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！