官网: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获取目前的地址(构建嵌套链接)与对应的路由拼接,从而进行匹配查找。

React初识整理(四)--React Router(路由)的更多相关文章

  1. React学习(3)——Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 文档中介绍 ...

  2. webpack 配置react脚手架(四):路由配置

    1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...

  3. React初识整理(五)--Redux和Flux(解决状态传递问题)

    Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...

  4. React初识整理(一)

    一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...

  5. React初识整理(二)--生命周期的方法

    React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...

  6. React初识整理(三)--受控组件解决方法

    1. 受控组件:组件处于受控制状态,不可更改输入框内的值. 2. 什么情况下会让组件变成受控组件? - 文本框设置了value属性的时候 - 单选框或多选框设置了checked属性的时候. 3. 如何 ...

  7. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  8. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

  9. React笔记整理

    大概大半年时间都在用react写项目,一直在笔记上零零星星地记录着,在新的一年即将到来之际,打算整理整理发出来. 一.React是什么? React是Facebook开源的用于构建用户界面的javas ...

随机推荐

  1. [Xcode 实际操作]九、实用进阶-(2)遍历设备(输出系统)上的所有字体

    目录:[Swift]Xcode实际操作 在实际工作中,经常需要调整界面元素的字体种类. 本文将演示输出系统提供的所有字体,方便检索和使用. 在项目导航区,打开视图控制器的代码文件[ViewContro ...

  2. ADO学途 five day 连接数据库

    用一个程序的目的就是为了方便对数据进行操作,没有数据的支持,程 序就成了一个空壳子.一般我们常用的数据库有三种mysql, SQL server, Oracle. C#中常用的就是SQL server ...

  3. 关于 js中的arguments 对象

    arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,以此类推.这个对象只有在函数体内部,才可以使用. var f = fu ...

  4. $.ajax()与vue结合获取数据并渲染

    html: <div id="app1"> <ul> <li v-for="item in datas"> <div ...

  5. 【poj1734】Sightseeing trip

    Sightseeing trip Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8520   Accepted: 3200 ...

  6. bat脚本启动Burp

    我的burp点击之后并不会直接打开,需要用命令启动,所以在网上找了一下快捷启动的方法. ①新建一个文本文档,输入start javaw -jar “burp路径”, ②另存为***.bat,文件类型选 ...

  7. 120 Triangle 三角形最小路径和

    给出一个三角形(数据数组),找出从上往下的最小路径和.每一步只能移动到下一行中的相邻结点上.比如,给你如下三角形:[     [2],    [3,4],   [6,5,7],  [4,1,8,3]] ...

  8. Unity Shader入门精要学习笔记 - 第4章 学习 Shader 所需的数学基础

    摘录自 冯乐乐的<Unity Shader入门精要> 笛卡尔坐标系 1)二维笛卡尔坐标系 在游戏制作中,我们使用的数学绝大部分都是计算位置.距离.角度等变量.而这些计算大部分都是在笛卡尔坐 ...

  9. QQ免费企业邮箱申请配置

    对于小企业来说,免费的企业邮箱是不错的选择,省去服务器费用和人员维护费用.在这里说一下,qq的免费企业邮箱.如果想搭建自己的企业邮局,请参考:centos extmail postfix nginx ...

  10. 发布好的SDE 如何注册,让数据库更新 实现arcgis 服务更新

    1, 打开 MXD 文件,前期已经发布的文件 右键  service peopertisers 右键  Service  Property 出现如下界面: “+”号 需要需要选择SDE库 不需要 选择 ...