React技术栈-React路由插件之react-router的基本使用

简介: 这篇博客介绍了React路由插件react-router的基本使用,包括其概念、API、以及如何通过实战案例在React应用中实现SPA(单页Web应用)的路由管理。

作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.React路由插件react-router概述

1>.什么是react-router

  react-router是react的一个插件库,说白了它只能被react使用。

  专门用来实现一个SPA应用

  基于react的项目基本都会用到此库

  官方文档:
    https://reacttraining.com/react-router/web/guides/quick-start

2>.什么是SPA

  单页Web应用(single page web application,简称SPA)

  整个应用只有一个完整的页面

  点击页面中的链接不会刷新页面, 本身也不会向服务器发请求

  当点击路由链接时, 只会做页面的局部更新

  数据都需要通过ajax请求获取, 并在前端异步展现

3>.路由的相关概念

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

  路由分类
    后端路由:   
      node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
    前台路由:   
      浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件 

  后端路由
    注册路由: router.get(path, function(req, res))
    当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
  
  前端路由
    注册路由: <Route path="/about" component={About}>
    当浏览器的hash变为#about时, 当前路由组件就会变为About组件

4>.前端路由的实现(react-router底层就是基于history库来实现了,严格来说react-router是对history的封装方便咱们前端开发程序员使用)

  history库
    网址: https://github.com/ReactTraining/history
    管理浏览器会话历史(history)的工具库
    包装的是原生BOM(全称Browser Object Model,是指浏览器对象模型)中window.history和window.location.hash

  history API
    History.createBrowserHistory(): 
      得到封装window.history的管理对象
    History.createHashHistory(): 
      得到封装window.location.hash的管理对象
    history.push(): 
      添加一个新的历史记录
    history.replace(): 
      用一个新的历史记录替换当前的记录
    history.goBack(): 
      回退到上一个历史记录
    history.goForword(): 
      前进到下一个历史记录
    history.listen(function(location){}): 
      监视历史记录的变化

二.react-router相关API

1>.组件

  <BrowserRouter>
    属于路由器组件标签,不带"#"符号,是基于H5的标准语法是实现,我们也可以称之为较新的标签,路由标签我更倾向使用该标签。
  <HashRouter>
    也属于路由器组件标签,带有"#"符号,时基于H5之前的语法实现,相对上面路由器组件标签较老,我称之为较老的标签。

  <Route>:
    路由标签。
  <Redirect>
    重定向标签。
  <Link>
    路由链接标签。
  <NavLink>
    导航路由链接标签。
  <Switch>
    交换/切换标签,它里面开源包含多个路由("<Route>")标签。

2>.其它

  history对象
    
  match对象
    
  withRouter函数

三.react-router基本使用实战案例

1>.使用npm命令安装react-router组件

C:\Users\yinzhengjie\WebstormProjects\myweb\my-react> npm install --save react-router-dom

2>.代码内容

  如下图所示,处理app.jsx文件内容不一样外,其它的文件内容和我的整理的笔记一样,可参考:https://www.cnblogs.com/yinzhengjie/p/12159074.html

import React,{Component} from 'react';
import {NavLink,Switch,Route,Redirect} from "react-router-dom";

import About from '../views/about'
import Home from '../views/home'
import Python from '../views/python'
import Java from '../views/java'
import Golang from '../views/golang'
import Linux from '../views/linux'
import MyNavLink from './MyNavLink'

export default class App extends Component{
        render(){
            return (
                <div>
                    <div className="row">
                        <div className="col-xs-offset-2 col-xs-8">
                            <div className="page-header">
                                <h2>React Router Demo</h2>
                            </div>
                        </div>
                    </div>

                    <div className="row">
                        <div className="col-xs-2 col-xs-offset-2">
                            <div className="list-group">
                                {/*导航路由链接,官方文档:https://reacttraining.com/react-router/web/api/NavLink*/}
                                <NavLink className="list-group-item" to='/about'>About</NavLink>
                                {/*注意哟,这里的"/home"路由使用的是咱们自己自定义的导航路由链接哟~因为此处我给它定义了特定的样式。*/}
                                <MyNavLink className="list-group-item" to='/home'>Home</MyNavLink>
                                <NavLink className="list-group-item" to='/python'>python数据分析工程师</NavLink>
                                <NavLink className="list-group-item" to='/java'>java大数据开发工程师</NavLink>
                                <NavLink className="list-group-item" to='/golang'>golang自动化运维工程师</NavLink>
                                <NavLink className="list-group-item" to='/linux'>Linux云计算工程师</NavLink>
                        </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='/python' component={Python}/>
                                        <Route path='/java' component={Java}/>
                                        <Route path='/golang' component={Golang}/>
                                        <Route path='/linux' component={Linux}/>
                                        {/*指定打开页面默认打开的组件*/}
                                        <Redirect to='/home'/>
                                    </switch>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
}

app.jsx文件内容

3>.启动脚手架

C:\Users\yinzhengjie\WebstormProjects\myweb\my-react> npm start

目录
相关文章
|
13天前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
41 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
13天前
针对react-captcha-code第三方插件不能每次触发深颜色的处理
针对`react-captcha-code`插件生成浅色验证码的问题,通过改造成class组件`MyCaptcha.js`,自定义颜色和验证码生成逻辑,解决了颜色问题。
14 1
针对react-captcha-code第三方插件不能每次触发深颜色的处理
|
1月前
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式:通过props传递数据和使用消息发布(publish)-订阅(subscribe)机制,并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
47 11
React技术栈-组件间通信的2种方式
|
1月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
45 4
React技术栈-React路由插件之自定义组件标签
|
1月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
27 2
React技术栈-React UI之ant-design使用入门
|
24天前
|
移动开发 前端开发 应用服务中间件
React两种路由模式的实现原理
React两种路由模式的实现原理
38 3
|
2月前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
45 0
|
3月前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
41 1
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
72 0
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
49 0

热门文章

最新文章

下一篇
无影云桌面