react——路由概念——创建方式——规则定义——渲染模式——获取路由参数

Posted 2022-09-23 勇敢*牛牛

介绍

---

前端应用大多数是SPA（单页应用程序），也就是只有一个html页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。

浏览器端的前端路由模式：hash模式，history模式

---

安装路由模块
路由模块不是react自带模块，需要安装第3方模块

// react-router-dom 它现在最新的版本6
npm i -S react-router-dom@5

react-router-dom路由库，它路由相关的配置当作组件调用设置

一些相关组件
路由模式组件
包裹整个应用，一个React应用只需要使用一次

• HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）

• BrowserRouter：使用H5的history API实现（localhost3000/first）

导航组件
用于指定导航链接, 最终Link会编译成a标签

• Link: 不会有激活样式
• NavLink：如果地址栏中的地址和to属性相匹配，则会有激活样式

路由规则定义组件
Route：

• path属性：路由路径，在地址栏中访问的地址
• component属性：和规则匹配成功后渲染的组件 /render/children
• children>component>render

各组件关系示意图

---

💖定义路由的模式，为了日后让当前项目中所有的组件都受到路由控制，定义在index.js中,在最顶层让路由模式。src/index.js

---

1️⃣引入路由相关组件 路由模式组件，告诉当前项目，我们要使用的路由模式
HashRouter, hash路由模式

BrowserRouter history路由模式，上线时，需要对nginx进行配置
import  BrowserRouter as Router, HashRouter  from 'react-router-dom'

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

2️⃣ Route 定义路由规则 ——路由地址和匹配成功后要渲染的组件
匹配默认为模糊匹配，而且它还会一直匹配到没有规则组件为止
importRoute from "react-router-dom"

<Route path="/home" component=Home></Route>
<Route path="/about" component=About></Route>

严格匹配:exact

<Route exact path="/home" component=Home></Route>
<Route exact path="/about" component=About></Route>

3️⃣Link 导航组件，它编译生成后的html标签只能是 a

<Link to="/home">Home</Link>
<Link to="/about">About</Link>
<Link to="/about">About</Link>

4️⃣NavLink 导航组件，它编译生成后的html标签只能是 a,但是它有激活样式active(地址栏中的地址和to属性匹配，
匹配规则，默认为模糊匹配
严格匹配:exact
修改激活样式名称：activeClassName=‘aaa’

<NavLink exact to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>

6️⃣ Redirect 重定向 使用它，一定要用到Switch，否则有循环的问题

<Redirect exact from="/" to="/home" />

7️⃣ 并且以上的路由没有一个匹配成功的，则用404页面 path属性不要写，写在switch中

<Route component=Notfound />
==========================================
<Switch>
	<Route exact path="/home" component=Home></Route>
	<Route exact path="/about" component=About></Route>
	<Redirect exact from="/" to="/home" />
	<Route component=Notfound></Route>
</Switch>

8️⃣ this.props.history.push(‘/about’) 编程式到行
9️⃣如果你想用对于匹配渲染成功后的组件使用编程式导航，你默认情况下，你只能在规则匹配成功后的组件本身中使用，它的子组件都不行。父组件也不行。
💖路由动态参数：
必须先声明再使用：

<Route exact path="/detail/:uid?" component=Detail></Route>

如何在页面上获取路由参数：
打印组件的this.props

获取动态路由参数

this.props.match.params.uid

💖 如何获取search字符串 字符串

通过：this.props.location.search获取
解析：
const search = new URLSearchParams(this.props.location.search)
let name = search.get("name")

或者生成对象模式：
const search = new URLSearchParams(this.props.location.search)
let searchData = ;
for(let [key,value] of search.entries())
	searchData[key] = value

console.log(searchData);

或者生成工具转变为对象：

String.prototype.toSearch = function () 
    let searchData = 
    if (this.toString() != '') 
        const search = new URLSearchParams(this.toString())
        search.forEach((value, key) => 
            searchData[key] = value
        )
    
    return searchData