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

2018-12-19 01:45:03来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【读书笔记】ES6 Module的语法

下一篇:Canvas:飞机大战 -- 游戏制作