第十节:React路由:react-router认识与基本使用

1. React Router的理解

React的路由根据项目的不同使用不同的路由库,web应用主要使用react-router和react-router-dom

react-router和react-router-dom的区别

  1. react-rotuer 核心库,提供了一些核心的api,但是没有提供dom操作进行跳转的api
  2. react-router-dom扩展了核心库,提供了一些操作DOM的api,
  3. web应用正常使用react-router-dom就可以了, 因为它自己同样依赖react-router


2. 路由组件认识

2.1 路由组件的认识

在react中和vue不同的是,路由不是配置的文件,而是组件, 正常的组件嵌套使用

在React router中通常使用的组件有三种

  1. 路由器组件: 如BrowserRouter(history模式) 和 HashRouter(hash模式)
  2. 路由匹配组件: Route 和 Switch 组件
  3. 导航组件: Link 和 NavLink 组件


2.2. 相关API
<BrowserRouter>    // 路由器组件
<HashRouter>       // 路由器组件
<Route>            // 显示路由组件,嵌套在路由器组件中
<Switch>           // 路由切换组件,如果配置成功多个路由也只会显示第一个
<Link>             // 路由导航组件
<NavLink>          // 路由导航组件
<Redirect>         // 路由重定向组件


3. 路由组件的使用

3.1 下载路由组件库
$ npm install react-router-dom --save

## or

$ yarn add react-router-dom


3.2 路由器组件的使用
3.2.1 路由器组件说明:
  1. 每一个React Router应用程序的核心都应该是路由器组件
  2. react-router-dom提供了BrowserRouter和HashRouter
  3. BrowserRouter采用常规路径显示方式的history路由显示模式
  4. HashRouter采用锚点显示的hash路由显示模式


3.2.2 BrowserRouter组件的使用

基本使用

采用history路由模式显示路由


示例代码:

// 导入路由器
import {BrowserRouter} from "react-router-dom"

// 使用路由器组件嵌套根组件APP
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

为什么使用BrowserRouter嵌套根组件APP呢?

其实没有说一定要嵌套APP根组件, 只是导航组件和路由组件必须嵌套的路由器组件中才会有效,否则就会报错

因此只要在你是用的导航组件和路由组件外嵌套即可, 嵌套根组件表示整个应用任何位置都可以是使用路由组件


BrowserRouter路由器采用history前端路由模式, 因此在路径显示上没有#

如下:

http://localhost:3000/goods


3.2.3 HashRouter组件的使用

HashRouter采用hash模式的前端路由, 以此会出现#/home

示例代码:

// 导入路由器
import {HashRouter} from "react-router-dom"

// 使用路由器组件嵌套根组件APP
ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>,
    document.getElementById('root')
);

路径显示结果:

http://localhost:3000/#/goods


3.2.4 路由器的别名使用

有的时候会将路由器组件在使用import导入是修改别名

示例代码如下

// 将HashRouter 路由器组件修改为别名Router使用
import {HashRouter as Router} from "react-router-dom"

// 使用路由器组件的别名
ReactDOM.render(
        <Router>
            <App />
        </Router>,
    document.getElementById('root')
);


3.3 路由匹配组件的使用
3.3.1 路由匹配组件Route的使用

Route组件用来控制路径对应显示的组件

说明:

  1. Route组件基本的两个属性,一个是path,一个是component
  2. path属性表示用来匹配路径,党路径匹配成功后展示component的内容
  3. component属性值是将来用于展示的组件


示例代码如下:

import {Route, Link} from 'react-router-dom'
// 导入组件
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

// App组件
function App() {
    return (
        <div className="App">
            
            {/* 
                Route路由展示组件
                当path的值和路径匹配成功后显示component对应的组件
            */} 
            <Route path="/home" component={Home}/>
            <Route path="/goods" component={Goods}/>
            <Route path="/about" component={About}/>
        </div>
    );
}

示例代码说明:

  1. 上面的示例代码,在默认打开是不显示任何组件内容,
  2. 默认打开的路径为/所以Route中的路径都匹配不成功
  3. 如果希望/路由对应的显示内容也为首页, 就可能会如下写法


示例代码

import {Route, Link} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">

            <Route path="/home" component={Home}/>
            <Route path="/goods" component={Goods}/>
            <Route path="/about" component={About}/>
            <Route path="/" component={Home}/>
        </div>
    );
}

示例代码说明:

  1. 示例的本意是希望/home和/路径都展示首页组件,/表示默认打开显示首页
  2. 但是示例真实的情况是,无论/home,/goods,/about路径,最后一个/Route都会展示
  3. 这样就导致了页面会同时渲染两个组件,


3.3.2 Switch组件

Switch组件说明:

  1. Switch组件用于包裹Route组件, 表示只会渲染第一个与路径配置成功的Route组件对应的内容
  2. 如果有两个组件都匹配路径都成功,也只会显示第一个,
  3. 或者显示Redirect重定向组件内容
  4. 也就是说路径只会匹配到第一个成功的Route就不会在下匹配其他Route组件了,
  5. 如果不使用Switch组件,则会将所有Route组件都匹配一下,所有匹配成功的组件都会展示


示例代码如下

import {Route, Link,Switch} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
            </Switch>
        </div>
    );
}

示例说明:

  1. 这样就解决了之前存在的问题
  2. 当路由为/时匹配最后一个Route,因此展示首页
  3. 如果当路由匹配到/goods,展示商品页,此时会中断匹配, 也就不会匹配到/,此时也不会再次展示一个首页组件


3.4 导航组件
3.4.1 导航组件说明:
  1. 导航组件的作用是用来点击跳转路由,为Link和NavLink
  2. Link组件和NavLink组件的区别在于时候会添加额外的类名
  3. Link组件在跳转路由时,当前活跃的导航不会添加任何类名
  4. NavLink跳转路由,会给当前活跃的导航添加额外的类名,可以利用类名添加不同的样式


3.4.2 Link组件的使用

Link组件有一个to属性, 有来指定跳转到那个路由

示例代码如下:

import {Route, Link,Switch} from 'react-router-dom'


import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">
            <Link to="/home">首页</Link>
            <Link to="/goods">商品页</Link>
            <Link to="/about">关于页</Link>

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
            </Switch>

        </div>
    );
}

示例说明:

  1. Link标签会被编译为a标签
  2. to属性表示当你点击时,跳转到那个路由上
  3. 但是不会添加任何额外的类名

控制台Elements里展示的内容

<div class="App">
    <a href="#/home">首页</a>
    <a href="#/goods">商品页</a>
    <a href="#/about">关于页</a>
    <div>这是首页</div>
</div>

因此没发确定当前那个导航对应的路由是活跃状态


3.4.3 NavLink 组件的使用

NavLink会给当前活跃的路径导航添加额外的类名, 利用添加给导航添加不同的样式

因此NavLink组件使用相对较多

示例代码:

import {Route, NavLink,Switch} from 'react-router-dom'

import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">
            <NavLink to="/home">首页</NavLink>
            <NavLink to="/goods">商品页</NavLink>
            <NavLink to="/about">关于页</NavLink>

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
            </Switch>

        </div>
    );
}

示例显示后的Elements结果

<div class="App">
    <a href="#/home">首页</a>
    <a href="#/goods" aria-current="page" class="active">商品页</a>
    <a href="#/about">关于页</a><
    div>商品页面</div>
</div>

此时会发现,当前展示的是商品页面, 对应的导航会有一个额外的类名activ

因此可以利用active给当前显示的导航添加不同的样式

.active{
    color:red;
}


3.5 路由重定向组件的使用

路由重定向 Redirect 组件使用说明

  1. Redirect组件可以在所有路由都匹配不成功后,默认跳转展示的内容,如访问的路由不存在,展示首页
  2. Redirect组件也可以在路由匹配成功后,验证权限, 不足的跳转指定路由, 如登录账号不存在跳转注册

示例代码:

import {Route, NavLink,Switch,Redirect} from 'react-router-dom'


import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">
            <NavLink to="/home">首页</NavLink>
            <NavLink to="/goods">商品页</NavLink>
            <NavLink to="/about">关于页</NavLink>

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
                {/* 使用路由重定向, 当路由匹配不成功时,显示首页 */}
                <Redirect to="/home" />
            </Switch>

        </div>
    );
}


3.6 withRouter组件的使用
3.6.1 withRouter组建了解
  1. withRouter为高阶组件,其实就是一个函数,参数是一个组件, 返回值也是一个组件
  2. 正常的路由组件都能在props属性接受和路由有关的match,location,history对象
  3. 如果是非路由组件不能在props属性中获取这些路由对象,如果需要在非路由组件中使用路由对象内容
  4. 就需要给非路由组件嵌套一个WitchRouter高级组件,

因为WitchRouter组件就是为了让非路由组件也能访问路由对象的高阶组件


3.6.2 未使用withRouter

非路由组件中获取props

export default class Header extends Component {

    render() {
        console.log(this.props);
        /*
       打印结果:
       {}
      */

        return (
            <h2>应用的头部</h2>
        );
    }
}

路由组件中获取props

export default class Home extends Component {

    render() {
        console.log(this.props);
        /*
        打印结果:
            {
                history: {...},
                location:{...},
                match:{...},
            }
        */
        return (
            <div>
                这是首页
            </div>
        );
    }
}


3.6.3 使用withRouter

使用withRouter执行,传入非路由组件

import React, { Component } from 'react';

// 引入高级组件
import { withRouter } from 'react-router-dom'
class Header extends Component {

    render() {
        console.log(this.props);
        /*
        打印结果:
            {
                history: {...},
                location:{...},
                match:{...},
            }
        */
        return (
            <h2>应用的头部</h2>
        );
    }
}

/*
 使用高级组件, withRouter的参数是Header组件,
 返回一个处理后的组件
*/
export default withRouter(Header)

此时非路由组建的props属性中就可以获取到路由组件才能获取到的history,math,location对象

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342