React中路由使用详解

php中世界最好的语言

发布时间：2018-05-24 14:20:11

2838人浏览过

来源于php中文网

原创

这次给大家带来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')
)

*.*

51shop 网上商城系统
51shop 由 PHP 语言开发, 使用快速的 MySQL 数据库保存数据 ,为中小型网站实现网上电子商务提供一个完美的解决方案.一、用户模块1. 用户注册：用户信息包括：用户ID、用户名、用户密码、性别、邮箱、省份、城市、联系电话等信息，用户注册后不能立即使用，需由管理员激活账号，才可使用（此功能管理员可设置）2. 登录功能3. 资料修改：用户可修改除账号以后的所有资料4. 忘记密码：要求用

下载

匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
。
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.js

import React from 'react'

export default class AppComponent extends React.Component{
    render(){
        return {this.props.children}
    }
}

LoginComponent.js

import React, {Component} from 'react'

export default class LoginComponent extends Component{
    login(){}
    render(){
        return Login
    }
}

HomeComponent.js

import React, {Component} from 'react'

export default class HomeComponent extends Component{
    login(){}
    render(){
        return Home
    }
}

Router.js

import 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.js

import 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中文网其它相关文章！