当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React初识整理（四）--React Router(路由)

React初识整理（四）--React Router(路由)

2018年12月19日  | 移动技术网IT编程  | 我要评论

官网：https://reacttraining.com/react-router

后端路由：主要做路径和方法的匹配，从而从后台获取相应的数据

前端路由：用于路径和组件的匹配，从而实现组件的切换。 如：`<route path="/about" component={about}/>`

一、router分类：

1、< browserrouter> 如：http://example.com/about（h5的新特性，不用写#号，具有多样化，使⽤了html5的history api来记录你的路由历史），如果刷新页面就会报404

2、 < hashrouter> 如：http://example.com/#/about 兼容老的浏览器，使⽤url( window.location.hash )的hash部分来记录，可以刷新。

二、环境配置：

　　react router库包含三个包： react-router , react-router-dom ,和 react-routernative 。

　　react-router 是路由的核⼼包，react-router-dom用于网站开发，eact-routernative 用于移动端应用开发。而且后两者都集成了核心包 react-router ，所有在这里我们导入react-router-dom就好。`npm install --save react-router-dom`

三、建立路由文件

　　①我们在src文件夹下自定义1个文件夹router，用于存放路由文件index.js。我们优先建立了3个模块，分别为登录login、注册register、管理主模块manage，然后将那3个模块导出。之后在index.js里面进行引入、配置。

import react, { component } from 'react'
import { hashrouter, route } from "react-router-dom"
import login from '../login'  //引入login模块
import register from "../register"  //引入register模块
import manage from "../manage"  //引入manage模块
//因为解构了component，所有直接使用，否则就要用react.component
//export default默认导出
export default class router extends component {
    render() {
        return (
        //router里面只能有1个子元素，所有用div将多个路由包起来
            <hashrouter>
                <div>
                //route路由，path定义路由接口，component指向模块 
                //exact={true}代表精确查找，如不写，则所有请求都会执行1次path="/"这个
                    <route path="/" exact={true} component={login} />
                    <route path="/login"  component={login} />
                    <route path="/register" component={register} />
                    <route path="/manage" component={manage} />
                </div>
            </hashrouter>
        )
    }
}

这里面的route，是react router⾥最重要的组件。若当前路径匹配route的路径，它会渲染对应的ui。理想来说， < route> 应该有⼀个叫 path 的prop，当路径名跟当前路径匹配才会渲染。


　　②然后在src下的主入口文件index.js里配置引入路由：

import react from "react"
import reactdom from "react-dom"

import router from "./router"
reactdom.render(<router />, document.getelementbyid("root"));

这样，进入localhost:3000/dist时就引入到router路由里了。

四、实现页面间的跳转（看上去始终保持在1个页面上）

　　在这里我们主要有两种方式：

　　①通过< link>标签跳转：react带有< link>标签，相当于我们html里的< a>标签，用于做链接跳转用的。我们先在页面最开始导入link元素： `import {link} from "react-router-dom"`， 然后就可以在模块任何地方使用了。 如：`<link to="/register">新用户注册</link>` 链接跳转（点击后）到注册的路由。这里的to就相当于< a>标签的href属性，指向链接的路由地址。

　　②使用history属性，那么什么是history属性？

　　　　- 每个router组件创建了⼀个history对象，⽤来记录当前路径( history.location ),上⼀步路径也存 储在堆栈中。当前路径改变时，视图会重新渲染，给你⼀种跳转的感觉。

　　　　 - 当前路径⼜是如何改变的呢？ history对象有 history.push() 和 history.replace() 这些⽅法来实现。当你点击 < link> 组件会触发 history.push() ，使⽤ < redirect> 则会调⽤ history.replace() 。

　　　　 - 其他⽅法 ， 例如 history.goback() 和 history.goforward() - ⽤来根据⻚⾯的后退和前进来跳转history堆栈。

　　　　 - 具体使用方法：hhistory主要存在于props属性下，我们可以通过this.props.history.push()这样来调用方法。具体示例：`this.props.history.push("/manage");`这样我们就可以在满足我们条件的情况下，通过这个代码实现跳转到manage的路由下了。没错，push进去的是路由地址，也就是我们要跳转的路由地址。

五、path和match

　　1、router的属性path是⽤来标识路由匹配的url部分，即指向对应component（组件）的路由入口。

　　2、当router的路由路径和当前页面的路径成功匹配后，会生成1个对象，即match（存在于props中）。match对象包含了以下信息：

　　　　 - match.url .返回url匹配部分的字符串。对于创建嵌套的 < link> 很有⽤ - match.path .返回路由路径字符串

　　　　- 就是 < route path=""> 。将⽤来创建嵌套的 < route>

　　　　 - match.isexact .返回布尔值，如果准确（没有任何多余字符）匹配则返回true。

　　　　 - match.params .返回⼀个对象包含path-to-regexp包从url解析的键值对。

六、switch组件

　　当⼀起使⽤多个 < route> 时，所有匹配的routes都会被渲染。这个时候用switch就很有用了，因为它只渲染匹配上的第一个组件。如：

<switch>
    <route exact path="/" component={login}/>
    <route path="/register" component={register}/>
    <route path="/manage" component={manage}/>
    <route path="/:id" render = {()=>(<p>i want this  text to show up for all routes other than '/', '/products' and '/category' </p>)}/>
</switch>

　　这里，如果不是用switch来包裹route，当url为 /register，所有匹配 /register路径的route都会被渲染。所以，那个path为 ：id 的 < route> 会跟着 products 组件⼀块渲染。用switch来包裹route就只会渲染匹配的第一项。

七、嵌套路由

前面我们给/login等创建了路由，那要想要/manage/students这样的两段路由呢？
import react, { component } from 'react'
import students from '../students'
import classes from "../classes"
import teachers from "../teachers"
import { link, route } from "react-router-dom"

export default class manage extends component {
    render() {
        let { match } = this.props;
        console.log(match)
        return (
            <div>
                <ul>
                    <li><link to={match.url + "/students"}>学生管理</link> </li>
                    <li><link to={match.url + "/classes"}>班级管理</link></li>
                    <li><link to={match.url + "/teachers"}>老师管理</link></li>
                </ul>
                <div>
                    <route path={match.path + "/students"} component={students}></route>
                    <route path={match.path + "/classes"} component={classes}></route>
                    <route path={match.path + "/teachers"} component={teachers}></route>
                </div>
            </div>
        )
    }
}

这里的路由就是用manage的1段路由 match.path（构建嵌套路由）得到的，与想要配置的2段路由拼接而成，这样的二段路由指向students这样的嵌套组件。 然后用link元素，用match.url获取目前的地址（构建嵌套链接）与对应的路由拼接，从而进行匹配查找。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网