js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下。
路由
通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-router.js。
注意:
react-router 4.0 以上的版本和 3.0 及以下的版本有很大的差别,本教程使用的是 3.0.2 的版本,后续会更新 4.0 以上版本的教程。
在使用 npm 安装时默认是安装最新版本,如果安装的版本是最新的,而使用上用的是 3.0 版本的用法,则会报错。
所以在 npm 安装时要指定版本 npm install react-router@3.0.2 --save-dev。
路由背景-SPA
传统的前端基本都是通过页面之间跳转来实现各功能模块的切换,这种做法会导致一个项目下来存在大量的 html 页面,而且每个页面都有一大堆的静态资源文件需要引入,在性能一直被垢病。后来有了随着 ajax 的普及,还有 jQuery 对 ajax 的封装后的便捷使用,开发者会大量的使用 ajax 来加载一个 html 页面到当前页面的某个容器当中来实现无刷新加载,但依然没有解决大量存在 html 页面和每个页面加载大量的静态资源文件而导致性能上的问题。随着移动互联网的普及,移动端对页面加载的性能要求和流量的限制越来越高,所以主流的前端框架都往 SPA 方向靠齐。
SPA,Single Page Application 的缩写,单页面应用,其目的是整个应用程序只有一个 html 页面,结合构建 webpack 的统一打包思想,把所有静态资源文件打包成一个 js 文件,在唯一的一个 html 页面引用,从而真正意义上实现一个 html 文件,一个 js 文件完成一个应用的构想。
SPA 优化了静态加载的性能,但一个应用程序还是有很多的功能模块,功能模块之间的切换,就变成了组件之间的切换,所以到目前为止基本上主流的前端框架都会有路由和组件两个概念,而且实现思想都是一致的。
路由引用与使用//es5
var {Router, Route, hashHistory, Link, IndexRoute, browserHistory} = require("react-router");
//es6
import {Router, Route, hashHistory, Link, IndexRoute, browserHistory} from 'react-router';
//es5 和 es6 的使用都是一样的
Root
//使用 `
Root
路由组件与属性
Link用于路由之间跳转,功能等同于 a 标签。
属性 to 等同于 a 标签的 href。
page,作用等同于 page。
Router是最外层的路由组件,整个 Application 仅一个。
属性 history 有两个属性值:hashHistory 路由将通过URL的hash部分(#)切换,推荐使用。
对应的 URL 形式类似 example.com/#/some/path
browserHistory 这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由,会显示网页找不到的404错误。
对应的 URL 形式类似 example.com/some/path。
Route 组件的属性Route 是组件 Router 子组件,可以通过嵌套 route 来实现路由嵌套。
属性 path:指定路由的匹配规则,这个属性是可以省略的,这样的话,不管路径是否匹配,总是会加载指定组件。
属性 component:指当 URL 映射到路由的匹配规则时会渲染对应的组件。
当 URL 为 example.com/#/ 时会渲染组件 RootComponent
当 URL 为 example.com/#/page1 时会渲染组件 Page1Component
基本用法import React from 'react'
import ReactDOM from 'react-dom'
import {Router, hashHistory, browserHistory} from 'react-router'
const html = (
- Root
- page
)
class RootComponent extends React.Component{
render(){
return (
RootComponent
{html}
)
}
}
class PageComponent extends React.Component{
render(){
return (
PageComponent
{html}
)
}
}
ReactDOM.render(
,
document.getElementById('app')
)
效果预览
路由参数路由的参数传递是通过 Route 组件的 path 属性来指定的。
参数值可通过 this.props.params.paramName 来获取。
:paramName匹配URL的一个部分,直到遇到下一个/、?、#为止。
。
匹配 URL:/#/user/sam,参数 sam 为必须存在。
this.props.params.name 的值为 sam。import React from 'react'
import ReactDOM from 'react-dom'
import {Router, hashHistory, browserHistory} from 'react-router'
class UserComponent extends React.Component{
render(){
return (
UserComponent 单个参数
路由规则:path='/user/:username'
URL 映射:{this.props.location.pathname}
username:{this.props.params.username}
)
}
}
ReactDOM.render(
,
document.getElementById('app')
)(:paramName)表示URL的这个部分是可选的。
。
匹配 URL:/#/order,this.props.params.orderid 获取的值为 undefined。
匹配 URL:/#/order/001,this.props.params.orderid获取参数的值为 001。import React from 'react'
import ReactDOM from 'react-dom'
import {Router, hashHistory, browserHistory} from 'react-router'
class UserComponent extends React.Component{
render(){
return (
OrderComponent 可选参数
路由规则:path='/order(/:orderid)'
URL 映射:{this.props.location.pathname}
orderid:{this.props.params.orderid}
)
}
}
ReactDOM.render(
,
document.getElementById('app')
)*.*匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
。
this.props.params 获取的参数为一个固定的对象: {splat: [*, *]}。
匹配 URL:/all1/001.jpg,参数为 {splat: ['001', 'jpg']}。
匹配 URL:/all1/001.html,参数为 {splat: ['001', 'html']}。
*匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
。
this.props.params 获取的参数为一个固定的对象: {splat: '*'}。
匹配 URL:/all2/,参数为 {splat: ''}。
匹配 URL:/all2/a,参数为 {splat: 'a'}。
匹配 URL:/all2/a/b,参数为 {splat: 'a/b'}。
**匹配任意字符,直到下一个/、?、#为止。匹配方式是贪婪模式。
this.props.params 获取的参数为一个固定的对象: {splat: [**, *]}。
匹配 URL:/all3/a/001.jpg,参数为 {splat: ['a', '001']}。
匹配 URL:/all3/a/b/001.jpg,参数为 {splat: ['a/b', '001']}。
效果预览
IndexRoute
当访问一个嵌套路由时,指定默认显示的组件
AppComponent.jsimport React from 'react'
export default class AppComponent extends React.Component{
render(){
return
{this.props.children}
}
}
LoginComponent.jsimport React, {Component} from 'react'
export default class LoginComponent extends Component{
login(){}
render(){
return
Login
}
}
HomeComponent.jsimport React, {Component} from 'react'
export default class HomeComponent extends Component{
login(){}
render(){
return
Home
}
}
Router.jsimport React from 'react'
import {Route, IndexRoute} from 'react-router'
import AppComponent from '../components/app/app'
import HomeComponent from '../components/home/home'
import LoginComponent from '../components/login/login'
const routes = (
)
export default routes;如果没有加IndexRoute,则在访问 http://localhost/#/ 时页面是空白的
访问 http://localhost/#/login 才会显示内容
加上 IndexRoute,在访问http://localhost/#/时会默认渲染HomeComponent
模块化
可利用组件Router的属性routes来实现组件模块化
router.jsimport React from 'react'
import ReactDOM from 'react-dom'
import {Route, Router, IndexRoute, hashHistory} from 'react-router'
import AppComponent from '../components/app/app'
import HomeComponent from '../components/home/home'
import LoginComponent from '../components/login/login'
const routes = (
)
ReactDOM.render(
,
document.getElementById('app')
)
编程式导航普通跳转 this.props.router.push('/home/cnode')
带参数跳转this.props.router.push({pathname: '/home/cnode', query: {name: 'tom'}})
路由钩子函数
每个路由都有enter和leave两个钩子函数,分别代表用户进入时和离开时触发。
onEnter
进入路由/home前会先触发onEnter方法,如果已登录,则直接next()正常进入目标路由,否则就先修改目标路径replace({ pathname: 'login' }),再next()跳转。let isLogin = (nextState, replace, next) => {
if(window.localStorage.getItem('auth') == 'admin'){
next()
} else {
replace({ pathname: 'login' })
next();
}
}
const routes = (
)
onLeave
对应的setRouteLeaveHook方法,如果return true则正常离开,否则则还是停留在原路由import React from 'react'
import {Link} from 'react-router'
export default class Component1 extends React.Component{
componentDidMount(){
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
)
}
routerWillLeave(){
return '确认要离开?'
}
render(){
return (
Login
)
}
}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
js路由在php上面使用,React中路由使用详解相关推荐
- React中的Hooks详解
1.概述 React官方网站原文:Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能. 我总结了下使用Hooks的理由: 1.解决class中的代 ...
- React中setState方法详解
一.为什么要使用 setState 方法,如何用? 在 React 中,组件分为 有状态组件 和 无状态组件,有状态组件就是能够定义 state 的组件,比如类组件,无状态组件反之,比如函数组件.st ...
- React中使用Vditor详解(自定义图片)
安装 npm install vditor -s 引用 导入依赖包 import Vditor from "vditor"; 导入样式 import "vditor/sr ...
- react中的setState详解
1.setState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象( ...
- react中的state详解
state 理解:state是组件对象最重要的属性,值是对象(可以包含多个key-value组合) state中的值可以修改,修改的唯一方法是调用this.setState,每次修改以后,自动调用 t ...
- 解决React中路由跳转报错:Cannot read property ‘push’ of undefined
React中路由跳转报错: 页面在Router中配置了,但组件无法使用 this.props.history.push() 进行跳转,并且会出现报错:Cannot read property 'pus ...
- computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...
- js 正则中冒号代表什么_javascript中正则表达式语法详解
好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要 ...
- webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
最新文章
- 一个很好的Qt教程个人主页
- 设置WPF窗口相对于非WPF窗口的位置
- 【hadoop】hive 安装实践
- [Node.js] mySQL数据库 -- promise
- 「三分钟系列05」3分钟看懂并发与并行
- pg数据库表接口和数据导出
- CUBRID学习笔记 21 查看主键外键索引
- 9.Linux性能诊断 --- Web应用安全:攻击,防护与检测,IPv6,容器安全
- 中国价格统计年鉴(2013-2021年)
- oppor9splus科学计算机,oppo r9s plus手机驱动
- 常见电商项目的数据库表设计(MySQL版)
- JAVA如何封装省市区_基于element ui封装的省市区三级联动
- 产品-Axure9英文版,使用DynamicPanel动态面板制作循环、自动滚动列表
- spring boot火车票预订系统毕业设计-附源码091029
- (高小德用车)高仿滴滴/快的应用源代码
- C++编程-牛客网-雀魂启动
- 好佳居软装十大品牌 软装这些知识我们要知道
- 网易2018校园招聘第3题
- DXP_protel2004_原理图设计基础_新建和添加原理图库文件_元件编辑范例
- Photozoom pro 7中文版下载
热门文章
- python学起来难不难-Python为什么那么受欢迎?学习Python难不难?
- python代码基础题-python3的基础练习题
- 如何检查电脑是否安装了python-python-如何检查安装了scikit的nltk版本?
- python3.6.1安装教程-ipython安装(python3.6.1)(转载)
- python基础第三章选择结构答案-python3 学习笔记(二)选择结构、循环结构
- python使用字典格式化字符串-Python中将(字典,列表等)变量格式化输出
- yolov5 v3.0训练报错: torch.nn.modules.module.ModuleAttributeError: ‘BatchNorm2d‘ object has no attribute
- html编辑器渗透,渗透笔记40、web编辑器漏洞手册.pdf
- mysql日常有哪些用_mysql日常笔记(持续更新)
- gperf的学习笔记(一)