React前端路由应用介绍

 更新时间:2022年09月24日 09:03:29   作者:勇敢*牛牛  
前端应用大多数是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

引入路由相关组件 路由模式组件,告诉当前项目,我们要使用的路由模式

HashRouter, hash路由模式

BrowserRouter history路由模式,上线时,需要对nginx进行配置
import { BrowserRouter as Router, HashRouter } from 'react-router-dom'
ReactDOM.render(
	<Router>
		<App />
	</Router>,
document.getElementById('root')
)

Route 定义路由规则 ——路由地址和匹配成功后要渲染的组件

匹配默认为模糊匹配,而且它还会一直匹配到没有规则组件为止

import{Route} 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>

Link 导航组件,它编译生成后的html标签只能是 a

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

NavLink 导航组件,它编译生成后的html标签只能是 a,但是它有激活样式active(地址栏中的地址和to属性匹配,

匹配规则,默认为模糊匹配

严格匹配:exact

修改激活样式名称:activeClassName=‘aaa’

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

Redirect 重定向 使用它,一定要用到Switch,否则有循环的问题

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

并且以上的路由没有一个匹配成功的,则用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>

this.props.history.push(‘/about’) 编程式到行

如果你想用对于匹配渲染成功后的组件使用编程式导航,你默认情况下,你只能在规则匹配成功后的组件本身中使用,它的子组件都不行。父组件也不行。

💖路由动态参数:

必须先声明再使用:

<Route exact path={<!--{C}%3C!%2D%2D%20%2D%2D%3E-->"/detail/:uid?"} component={<!--{C}%3C!%2D%2D%20%2D%2D%3E-->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
}

到此这篇关于React前端路由应用介绍的文章就介绍到这了,更多相关React路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解如何在React中监听鼠标事件

    详解如何在React中监听鼠标事件

    React可以通过使用React事件系统来监听鼠标事件,您可以在React组件中通过使用特定的事件处理函数来注册和处理鼠标事件,本文小编讲给大家详细介绍一下如何在React中监听鼠标事件,需要的朋友可以参考下
    2023-09-09
  • React表单容器的通用解决方案

    React表单容器的通用解决方案

    本文主要介绍了React表单容器的通用解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • react build 后打包发布总结

    react build 后打包发布总结

    这篇文章主要介绍了react build 后打包发布总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 使用store来优化React组件的方法

    使用store来优化React组件的方法

    这篇文章主要介绍了使用store来优化React组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • react路由v6版本NavLink的两个小坑及解决

    react路由v6版本NavLink的两个小坑及解决

    这篇文章主要介绍了react路由v6版本NavLink的两个小坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • react express实现webssh demo解析

    react express实现webssh demo解析

    这篇文章主要为大家介绍了详解react express实现webssh demo解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • react map使用方法实例详解

    react map使用方法实例详解

    map()方法是在React中常用的数组处理方法之一,可以用于遍历数组、生成组件列表以及进行数据转换等操作,通过合理运用map()方法,可以更灵活地处理和展示数据,下面给大家讲解react map使用方法,感兴趣的朋友一起看看吧
    2023-10-10
  • React实现全局组件的Toast轻提示效果

    React实现全局组件的Toast轻提示效果

    这篇文章主要介绍了React实现全局组件的Toast轻提示效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 使用react context 实现vue插槽slot功能

    使用react context 实现vue插槽slot功能

    这篇文章主要介绍了使用react context 实现vue插槽slot功能,文中给大家介绍了vue的slot的实现方法,需要的朋友可以参考下
    2019-07-07
  • 使用React制作一个贪吃蛇游戏的代码详解

    使用React制作一个贪吃蛇游戏的代码详解

    Snake Game 使用 ReactJS 项目实现功能组件并相应地管理状态,开发的游戏允许用户使用箭头键控制蛇或触摸屏幕上显示的按钮来收集食物并增长长度,本文给大家详细讲解了如何使用 React 制作一个贪吃蛇游戏,需要的朋友可以参考下
    2023-11-11

最新评论