React 0基础学习路线（6）— 图解深度详述React路由及其详细案例（附详细案例代码解析过程）

最新推荐文章于 2022-08-13 16:07:14 发布

溜_x_i_a_o_迪

最新推荐文章于 2022-08-13 16:07:14 发布

阅读量518

点赞数 1

分类专栏： # React基础文章标签： React vue web React Router ReactRouter中⽂⽂档高清pdf格式

本文链接：https://blog.csdn.net/u013946061/article/details/107166997

版权

React基础专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

1. 重点提炼
2. React.js - 路由react-router-dom

1. 重点提炼

React 路由

React-Router
- Native
- Web : react-router-dom
BrowserRouter / HashRouter：路由根组件，提供路由基础服务
Route：路由组件，处理 url 与组件的映射（绑定）
Link：动态生成 a 标签，并提供导航服务

2. React.js - 路由react-router-dom

2.1 路由

实际上这个路由，和我们平时使用的路由器是一样的，没太大差异，其目的就是内容分发（分流）。其实就是将一整块内容，切分成一个个部分，根据某种规则进行分块的访问。比如现在有很多电脑，你想把它们纳入到一起进行管理，这个时候就需要购买一个路由器了。它核心作用其实就是处理我们每次发送的请求以及数据。就相当于我们现在拥有一个庞大的资源，那么资源怎么去管理呢？不可能每次请求，都把这么庞大的资源都塞给接受者，发送人和请求人都会累奔溃。一般把资源按照不同的类别和需求进行分门别类，把它组织好，分好，这个时候得需要某种方式得到数据。

一般情况下都是用url来获得数据的，通过它与后端对应的服务与资源做对应，即通过不同的url即可得到后端不同的数据，其实是做内容分发用的，所以实际前端路由概念是很类似的。

当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，对资源量浪费，同时也会导致整个 JavaScript 重新执行，丢失状态。

如a、b两个页面都是一样的，有99%是一样的，就有一些文字不同。如果从a页面切换到b页面，也等同于重新发了一个请求，去请求b页面的资源，浏览器就会把整个页面进行重新渲染，这样对资源是极其地浪费。

为了解决这样的问题，用js的方式去拉去数据，而不是一整个页面，而是变化地部分。如第一次请求是一个首页，浏览器请求整个页面。但第二次比如跳转详情页面，就没必要去请求一个完整的页面过来了，这时候我们是通过ajax往后端发送请求，后端传递的数据仅仅是页面当中不同的部分的数据，而不是整个新页面。当前端页面拿到这个数据以后，就动态地通过dom的一系列操作，把页面需要变化的部分给替换掉，不变地部分保留下来。这样的操作其实就不是通过浏览器本身发送的请求，所以得到的内容是不会被浏览器重新渲染的。它会通过js，利用操作dom的方式进行局部更新。即通过这样地方式，节约很多性能，同时也不会改变页面的状态。

如有一个复杂的页面，页面当中有一个表单，正则填写的时候，侧面有一个新闻。写得过程中，想一边看新闻，需要更新一下新闻，一点击，只会通过js把新闻的部分替换掉，我们的表单是不会动的，这个时候并不是渲染整个页面，它能够更好的保留用户在页面当中的操作状态，即用户体验是非常好的。我们通常称这种模式为SPA（单页面应用）。

2.1.1 SPA

Single Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容

优点：

有更好的用户体验（减少请求和渲染和页面跳转产生的等待与空白），页面切换快（不会导致整个页面重新渲染）
重前端，数据和页面内容由异步请求（AJAX）+ DOM 操作来完成，前端处理更多的业务逻辑

缺点：（会有很多技术去解决这些问题）

首屏处理慢（因为把很多数据和逻辑都放在前端了，页面相当于反应速度会慢一些）
不利于 SEO（搜索引擎的优化）

2.1.2 SPA 的页面切换机制

SPA 的页面切换机制主要有两种方式。

SPA虽然是单页面的，但是如果全部通过Ajax和dom渲染去完成的话，如我们现在去请求一个首页，用Ajax方式请求内容，会有一个问题。如果这个时候想单看列表，不想看首页这么多的内容呢？这个时候你就会发现我们的操作，不可跳转，即必须按照某种方式：第一步、第二步、…、一直点，点到你看到的列表为止。它是不能作为单独的方式给你呈现的，因为所有的后续操作都是通过这个入口完成的，必须先进入口，通过入口一步步操作才能够看到我们想看的东西。这样的话，会非常繁琐和麻烦。这个时候就想到一个办法，伪造url定位到不同的操作当中。不需要点击n多步，就可以访问到n多步操作完成后的页面。但是我们也不希望这个url产生真正的请求，这个时候我们采取的方式就是：

前端路由主要的模式（通过这两种方式更改url，但更改url的同时又不会发送请求，然后再去监听它的事件，把页面渲染的逻辑放在回调函数中，当js发现url变化了，则会动态地根据url的变化，去渲染我们想要看到的页面内容。）：

基于 URL Hash 的路由
基于 HTML5 History API 的路由

虽然 SPA 的内容都是在一个页面通过 JavaScript 动态处理的，但是还是需要根据需求在不同的情况下分内容展示，如果仅仅只是依靠 JavaScript 内部机制去判断，逻辑会变得过于复杂，通过把 JavaScript 与 URL 进行结合的方式： JavaScript 根据 URL 的变化，来处理不同的逻辑，交互过程中只需要改变 URL 即可。这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由，其本质上与后端路由的思想是一样的。

2.1.3 后端路由与前端路由

后端路由与前端路由在本质上是类似的，都是把不同的 URL 与某个操作进行关联绑定，得到不一样的结果

2.1.3.1 后端路由

通过 HTTP 把请求发送到后端服务器，后端服务器接收到请求以后根据不同的请求 URL 来执行不同的操作，返回处理好的数据（JSON、HTML、JS 代码、CSS、图像……）

需要发送 HTTP 请求
业务逻辑由后端处理，返回处理后的结果给前端（浏览器）

2.1.3.2 前端路由

前端路由只是改变了 URL 或 URL 中的某一部分，但一定不会直接发送请求，可以认为仅仅只是改变了浏览器地址栏上的 URL 而已，JavaScript 通过各种手段处理这种 URL 的变化，然后通过 DOM 操作动态的改变当前页面的结构

URL 的变化不会直接发送 HTTP 请求
业务逻辑由前端 JavaScript 来完成

目前前端路由主要的模式：

基于 URL Hash 的路由
基于 HTML5 History API 的路由

2.1.3.2.1 URL Hash

通过通过修改 URL 的 Hash 值来改变 URL，Hash 的变化是不会发送请求的，同时 JavaScript 通过监听 hashchange 事件来动态处理逻辑和页面渲染

优点

兼容性好

缺点

URL 不美观，SEO 不友好

2.1.3.2.2 HTML5 History API

封装一个函数，该函数通过 HTML5 History 提供的 API 来动态改变 URL ，这种方式也不会发送请求，然后同时根据要改变的目标 URL 来处理逻辑和页面渲染

URL Hash 模式类似 Vue 中的数据拦截机制

HTML5 History API 模式类似 React.js 中的 setState

2.1.4 React.js 中的路由

React.js 路由的基本思想就是，把不同的 URL 与指定的某些 React.js 组件进行关联，不同的 URL 渲染显示不同的组件，其它框架（如：vue、angular）都是一样的思想

2.2 React Router

理解了路由基本机制以后，也不需要重复造轮子，我们可以直接使用 React Router 库

https://reacttraining.com/react-router/

React Router 提供了多种不同环境下的路由库

web
native

2.2.1 基于 Web 的 React Router

基于 web 的 React Router 为：react-router-dom

2.2.1.1 安装

npm i -S react-router-dom

2.2.1.2 概览

react-router-dom 的核心是组件，它提供了一系列的组件，如：

Router 组件
BrowserRouter 组件
HashRouter 组件
Route 组件
Link 组件
NavLink 组件
Switch 组件
Redirect 组件

以及其它一些 API，来完成路由的功能

2.3 基础

2.3.1 应用场景（一）

假设当前应用有两个页面，对应的 URL 与页面关系

/                :    首页
/about    :    关于我们

用户一进来的是首页，在里面的链接或按钮，点击之后跳到“关于我们”的页面。

现在不用传统的方式写两个html页面，发送两次请求，而是用React搭建。React渲染过后会形成一个页面，这个页面里看到的内容其实就是主件，实际上就是把一个个页面转换成一个个的组件。然后再通过url的形式，它是基于htmlhistory的api，或者通过url的hash两种模式，当url发生变化的时候，来给用户展示不同的组件。其实就是页面的某个部分会根据不同的url而变化，来展示不同的组件内容，这其实就是前端路由的概念。

2.3.1.1 Router 组件

页面 = 组件
路由：根据不同的 url 的变化，在我们的应用中指定的位置渲染不同的组件，从而显示出来不同的内容

组件划分类型（注意它们不是互相独立的，是相互可能存在关系的，这里只是做功能上的划分）：

页面组件（视图组件），一个页面组件一般对应的就是完整的页面（完整：一个url所表示的页面）（如：登页和注册页等）
功能组件（具有一定功能的，但一般情况下又不是一个完整的页面的组件，轮播图，对话框等，功能组件就是面组件的一部分）
- 带视图的功能组件（轮播图）
- 不带视图的功能组件，即业务型的功能组件（数据过滤，数据请求 - 作为容器，错误捕获（把错误发给指定邮箱））
容器组件

项目整个结构也需要分类：

components（功能型组件、容器型组件）

views（视图型组件）

2.3.1.1.1 exmaple01

应用场景（一）

2.3.1.1.1.1 exmaple01-1

框子实现。

app.js

import React from 'react';
 
import Home from './views/Home';
import About from './views/About';
 
class App extends React.Component {
 
    constructor(props) {
        super(props);
    }
 
    render() {
        return (
            <div className="App">
                <Home/>
                <About/>
            </div>
        )
    }
 
}
 
export default App;

src/views/Home.js

import React from 'react';
 
export default class Home extends React.Component {
 
    render() {
        return (
            <div>
                <h2>商品列表</h2>
            </div>
        );
    }
 
}

src/views/About.js

import React from 'react';
 
export default class About extends React.Component {
 
    render() {
        return(
            <div>
                关于我们
            </div>
        );
    }
 
}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.01-1
Branch：branch4

commit description：v3.01-1-example01-1（应用场景（一）- 框子实现）

tag：v3.01-1

2.3.1.1.1.2 example01-2

console.log(window.location);

hash其实就是url后面#的内容

通过hash设置默认首页及url

app.js

 
 
import React from 'react';
 
 
import Home from './views/Home';
import About from './views/About';
 
 
class App extends React.Component {
 
    constructor(props) {
        super(props);
    }
 
    render() {
        // console.log(window.location);
 
        let hash = window.location.hash || '#home';
 
        console.log(hash);
 
        return (
            <div className="App">
                <Home/>
                <About/>
            </div>
        )
    }
 
}
 
export default App;

 
 
import React from 'react';
 
 
import Home from './views/Home';
import About from './views/About';
 
 
class App extends React.Component {
 
    constructor(props) {
        super(props);
    }
 
    render() {
        // console.log(window.location);
 
        let hash = window.location.hash || '#home';
 
        console.log(hash);
 
        return (
            <div className="App">
                {/*<Home/>*/}
                {/*<About/>*/}
 
                {
                    hash === '#home' && <Home />
                }
 
                {
                    hash === '#about' && <About />
                }
            </div>
        )
    }
 
}
 
export default App;

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.01-2
Branch：branch4

commit description：v3.01-2-example01-2（应用场景（一）- 通过hash设置默认首页及url）

tag：v3.01-2

这里的原理虽然不难，但是要是实现用户点击，跳转页面。需要监听hashchange的变化，考虑hash后url的规则，实际上整个页面会更加复杂，实际需求是复杂的。实际上React-router的内部就是运用这些原理的，只是封装好之后，提供更好的方式供使用，其内部封装了很多组件。

如果我们希望页面中某个部分的内容需要根据 URL 来动态显示，需要用到 Router 组件，该组件是一个容器组件，只需要用它包裹 URL 对应的根组件即可

react-router-dom 为我们提供了几个基于不同模式的 router 子组件（功能性组件且容器组件）

BrowserRouter 组件
HashRouter 组件
MemoryRouter 组件
NativeRouter 组件
StaticRouter 组件

2.3.1.1.2 BrowserRouter 组件

基于 HTML5 History API 的路由组件

2.3.1.1.3 HashRouter 组件

基于 URL Hash 的路由组件

css

ul {
    margin: 0;
    padding: 0;
}
 
li {
    list-style: none;
}
 
.item-list li {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px dotted #333;
}
.item-list li.head {
    font-weight: bold;
}
.item-list li span {
    min-width: 200px;
}
 
.pagination {
    margin: 10px;
}
.pagination a {
    margin: 0 5px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #f4f4f5;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: #606266;
    text-decoration: none;
}
.pagination a:hover {
    color: #409eff;
}
.pagination a.active {
    background-color: #409eff;
    color: #fff;
    cursor: text;
}
.pagination .goto {
    margin: 0 5px;
    box-sizing: border-box;
    width: 80px;
    height: 30px;
    border: 1px solid #dcdfe6;
    outline: none;
    text-align: center;
    vertical-align: top;
}

App.js

import React from 'react';
 
import {BrowserRouter as Router} from 'react-router-dom';
// import {HashRouter as Router} from 'react-router-dom';
 
import BaseApp from './BaseApp/Index';
 
function App() {
    return (
        <div>
            <h1>React-Router</h1>
            <hr/>
 
            <Router>
                <BaseApp />
            </Router>
        </div>
    );
}
 
export default App;

import {BrowserRouter as Router} from 'react-router-dom'

导入 BrowserRouter 组件，并命名 Router 别名，方便使用

<Router>
      <BaseApp />
</Router>

只对页面中的 BaseApp 组件使用路由

./BaseApp/Index.js

import React from 'react';
import {Route, Link} from 'react-router-dom';
 
import Home from './Home';
import About from './About';
 
export default class BaseApp extends React.Component {
 
    render() {
        return(
            <div>
                <h2>路由基础使用</h2>
 
                <nav>
                    <Link to="/">Home</Link>
                    <span> | </span>
                    <Link to="/about">About</Link>
                </nav>
                <br/>
 
                <Route exact path='/' component={Home} />
                <Route path='/about' component={About} />
            </div>
        );
    }
 
}

import {Route} from 'react-router-dom';

2.3.1.2 Route 组件

注意这个组件是没有字母 r 的，通过该组件来设置应用单个路由信息，Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候，后面 component 将要显示的区域

<Route path='/' component={Home} />

当 URL 为：’/’ 的时候，组件 Home 将显示在这里

2.3.1.2.1 exact

exact 属性表示路由使用精确匹配模式，非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由

2.3.1.3 Link 组件

Link 组件用来处理 a 链接类似的功能（它会在页面中生成一个 a 标签），但设置这里需要注意的，react-router-dom 拦截了实际 a 标签的默认动作，然后根据所有使用的路由模式（Hash 或者 HTML5）来进行处理，改变了 URL，但不会发生请求，同时根据 Route 中的设置把对应的组件显示在指定的位置

2.3.1.3.1 to 属性

to 属性类似 a 标签中的 href

2.3.1.4 example02

场景（一）应用。

2.3.1.4.1 example02-1

HashRouter组件：

被HashRouter 包含的组件才能响应路由
BrowserRouter: 基于 HTML5 History API

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {HashRouter} from 'react-router-dom';
 
ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>,
    document.getElementById('root')
);
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Route配置url与组件的映射关系：什么url与什么组件现在页面的什么位置。所在的位置就是满足要求以后组件渲染对应的位置。

path对应url、component对应组件

src/App.js

import React from 'react';
 
import {Route} from 'react-router-dom';
 
import Home from './views/Home';
import About from './views/About';
 
class App extends React.Component {
 
    constructor(props) {
        super(props);
    }
 
    render() {
 
        return (
            <div className="App">
                <h1>React路由</h1>
                <Route path="/" component={Home}/>
            </div>
        )
    }
 
}
 
export default App;

                    <h1>React路由</h1>
                    <hr/>
                    <Route path="/" component={Home}/>
                    <Route path="/about" component={About}/>

发现首页也显示进去了，因为此时路由url既满足首页又满足about，所以需要我们精确匹配。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.02-1
Branch：branch4

commit description：v3.02-1-example02-1（应用场景（一）- React路由匹配）

tag：v3.02-1

2.3.1.4.2 example02-2

exact 属性表示路由使用精确匹配模式，非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由

                    <h1>React路由</h1>
                    <hr/>
                    {/*<Route path="/" component={Home}/>*/}
                    <Route path="/" component={Home} exact />
                    <Route path="/about" component={About}/>

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.02-2
Branch：branch4

commit description：v3.02-2-example02-2（应用场景（一）- React路由精确匹配）

tag：v3.02-2

2.3.1.4.3 example02-3

用户在做页面跳转时，不可能自己手动输入url，所以以上是不可能得以应用的。通常我们使用UI的方式，关联到页面的元素，供用户点击跳转。

                    <h1>React路由</h1>
                    <hr/>
                    <Route path="/" component={Home} exact />
                    <Route path="/about" component={About}/>
 
                    <nav>
                        <a href="/">首页</a>
                        <span> | </span>
                        <a href="/about">关于我们</a>
                    </nav>

这样是错误的，只会刷新页面并毫无反应！必须带#。

                    <h1>React路由</h1>
                    <hr/>
                    <Route path="/" component={Home} exact />
                    <Route path="/about" component={About}/>                  
                    <nav>
                        <a href="#/">首页</a>
                        <span> | </span>
                        <a href="#/about">关于我们</a>
                    </nav>

有人可能会问，为啥可以把对应的组件显示出来呢？

因为react-router-dom会监听hash的变化，我们只需要触发hash的变化就行了，这个库的内部会触发hashchange事件。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.02-3
Branch：branch4

commit description：v3.02-3-example02-3（应用场景（一）- React路由精确匹配，UI的方式控制）

tag：v3.02-3

2.3.1.4.4 example02-4

但以上这种形式并不是太好（url也很丑），以上是hash模式，接下来演示historyApi的模式。

BrowserRouter: 基于HTML5 History API。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {HashRouter, BrowserRouter} from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

它是基于html5的，/更加美观。

                    <nav>
                        <a href="/">首页</a>
                        <span> | </span>
                        <a href="/about">关于我们</a>
                    </nav>

但我们会发现一个问题，就是它是刷新了我们整个页面的！刷新完毕后，再根据url再显示主件。

如果有个input，就坑了！

                    <h1>React路由</h1>
                    <hr/> 
                    <nav>
                        <a href="/">首页</a>
                        <span> | </span>
                        <a href="/about">关于我们</a>
                    </nav>
                    <input type="text"/>
                    <hr/>
                    <Route path="/" component={Home} exact />
                    <Route path="/about" component={About}/>

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.02-4
Branch：branch4

commit description：v3.02-4-example02-4（应用场景（一）- 使用BrowserRouter组件，带来的丢失状态的问题）

tag：v3.02-4

2.3.1.4.5 example02-5

怎么处理呢？不要用原生的a标签了！推荐使用它的link组件。

    import React from 'react';
 
    import {Route, Link} from 'react-router-dom';
 
    import Home from './views/Home';
    import About from './views/About';
 
    class App extends React.Component {
 
        constructor(props) {
            super(props);
        }
 
        render() {

            return (
                <div className="App">
                    <h1>React路由</h1>
                    <hr/>
                    <nav>
                        <Link to="/">首页</Link>
                        <span> | </span>
                        <Link to="/about">关于我们</Link>
                    </nav>
                    <hr/>
                    <input type="text"/>
                    <Route path="/" component={Home} exact />
                    <Route path="/about" component={About}/>
                </div>
            )
        }
 
    }
 
    export default App;

link帮助我们生成的a标签，还监听了a标签的点击事件，阻止了a的默认跳转行为，同时在它的内部又触发了html5history的api，修改了url，再根据修改的url，显示对应的组件。

同时不论是用HashRouter还是BrowserRouter，link组件都会帮我们生成对应a标签，我们无需关系是否加#了！

仔细观察，a标签里有点击事件。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.02-5
Branch：branch4

commit description：v3.02-5-example02-5（应用场景（一）- 使用BrowserRouter组件，解决带来的丢失状态的问题）

tag：v3.02-5

2.3.2 应用场景（二）

最近生活拮据，想在应用中卖点东西补贴一下家用

2.3.2.1 状态提升

前面讲组件中提到过组件状态提升，如果多个组件需要共享一个状态，那么就讲状态提升到使用该状态的共同父级组件上。

./BaseApp/Index.js

this.state = {
  items: [
    {
      id: 1,
      name: 'iPhone XR',
      price: 542500
    },
    {
      id: 2,
      name: 'Apple iPad Air 3',
      price: 377700
    },
    {
      id: 3,
      name: 'Macbook Pro 15.4',
      price: 1949900
    },
    {
      id: 4,
      name: 'Apple iMac',
      price: 1629900
    },
    {
      id: 5,
      name: 'Apple Magic Mouse',
      price: 72900
    },
    {
      id: 6,
      name: 'Apple Watch Series 4',
      price: 599900
    }
  ]
}

2.3.2.2 传递 props

<Route exact path='/' component={Home}

如果 Route 使用的是 component 来指定组件，那么不能使用 props

2.3.2.2.1 example03

首先我们希望把商品列表显示在home主页当中，因此我们需要往该组件中传数据了。而目前我们home主件是作为一个属性传给Route的。

            this.state = {
                items: [
                    {
                        id: 1,
                        name: 'iPhone XR',
                        price: 542500
                    },
                    {
                        id: 2,
                        name: 'Apple iPad Air 3',
                        price: 377700
                    },
                    {
                        id: 3,
                        name: 'Macbook Pro 15.4',
                        price: 1949900
                    },
                    {
                        id: 4,
                        name: 'Apple iMac',
                        price: 1629900
                    },
                    {
                        id: 5,
                        name: 'Apple Magic Mouse',
                        price: 72900
                    },
                    {
                        id: 6,
                        name: 'Apple Watch Series 4',
                        price: 599900
                    }
                ]
            }

{/*
    下面这种写法，items 是传递给了 Route ，而不是 Home
*/}
<Route path="/" component={Home} exact items={this.state.items} />
// 如果是我们自己写的数据，我们传参是如下形式：
<Home items={this.state.items} / >

我们在首页组件中打印一下props，我们看看一下：

react-Novice05\app\src\App.js

import React from 'react';

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

import Home from './views/Home';
import About from './views/About';

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>
                <nav>
                    <Link to="/">首页</Link>
                    <span> | </span>
                    <Link to="/about">关于我们</Link>
                </nav>
                <hr/>
                <Route path="/" component={Home} exact items={this.state.items}/>
                <Route path="/about" component={About}/>
            </div>
        )
    }

}

export default App;

react-Novice05\app\src\views\Home.js

import React from 'react';

export default class Home extends React.Component {

    render() {
        console.log(this.props);
        return (
            <div>
                <h2>商品列表</h2>
            </div>
        );
    }

}

小迪找了很久，也确实没找到items。

上面这种写法，items 是传递给了 Route ，而不是 Home。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.03
Branch：branch4

commit description：v3.03-example03（应用场景（二）- 如何给路由组件的组件参数传值？）

tag：v3.03

2.3.2.2.2 Route : render

<Route exact path='/' render={() => <Home items={this.state.items} />} />

通过 render 属性来指定渲染函数，render 属性值是一个函数，当路由匹配的时候指定该函数进行渲染。

2.3.2.2.2.1 example04

以上是不成功的，那路由组件怎么给组件参数传值呢？我们修改一下：

传递 props 给 component指定的组件
Route 还提供了一个 render属性，传入一个函数，函数返回的值就是等同于 Component指定的组件渲染的结果。

    import React from 'react';
 
    import {Route, Link} from 'react-router-dom';
 
    import Home from './views/Home';
    import About from './views/About';

    class App extends React.Component {
 
        constructor(props) {
            super(props);
 
            this.state = {
                items: [
                    {
                        id: 1,
                        name: 'iPhone XR',
                        price: 542500
                    },
                    {
                        id: 2,
                        name: 'Apple iPad Air 3',
                        price: 377700
                    },
                    {
                        id: 3,
                        name: 'Macbook Pro 15.4',
                        price: 1949900
                    },
                    {
                        id: 4,
                        name: 'Apple iMac',
                        price: 1629900
                    },
                    {
                        id: 5,
                        name: 'Apple Magic Mouse',
                        price: 72900
                    },
                    {
                        id: 6,
                        name: 'Apple Watch Series 4',
                        price: 599900
                    }
                ]
            }
        }
 
        render() {
            return (
                <div className="App">
                    <h1>React路由</h1>
                    <hr/>
                    <nav>
                        <Link to="/">首页</Link>
                        <span> | </span>
                        <Link to="/about">关于我们</Link>
                    </nav>
                    <hr/>
                    <Route path="/" exact  render={() => {
                        return <div>我是render出来的</div>
                    }} />
                    <Route path="/about" component={About}/>  
                </div>
            )
        }
 
    }
 
    export default App;

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.04-1
Branch：branch4

commit description：v3.04-1-example04-1（应用场景（二）- 如何给路由组件的组件参数传值？传递 props 给 component 指定的组件）

tag：v3.04-1

app.js

    import React from 'react';
 
    import {Route, Link} from 'react-router-dom';
 
  
 
    import Home from './views/Home';
    import About from './views/About';

    class App extends React.Component {
 
        constructor(props) {
            super(props);
 
            this.state = {
                items: [
                    {
                        id: 1,
                        name: 'iPhone XR',
                        price: 542500
                    },
                    {
                        id: 2,
                        name: 'Apple iPad Air 3',
                        price: 377700
                    },
                    {
                        id: 3,
                        name: 'Macbook Pro 15.4',
                        price: 1949900
                    },
                    {
                        id: 4,
                        name: 'Apple iMac',
                        price: 1629900
                    },
                    {
                        id: 5,
                        name: 'Apple Magic Mouse',
                        price: 72900
                    },
                    {
                        id: 6,
                        name: 'Apple Watch Series 4',
                        price: 599900
                    }
                ]
            }
        }
 
        render() {
 
            return (
                <div className="App">
 
                    <h1>React路由</h1>
                    <hr/>
                    <nav>
                        <Link to="/">首页</Link>
                        <span> | </span>
                        <Link to="/about">关于我们</Link>
                    </nav>
                    <hr/>
                    <Route path="/" exact render={() => {
                        return <Home items={this.state.items} />
                    }} />
                    <Route path="/about" component={About}/>      
                </div>
            )
        }
 
    }
 
    export default App;

src/views/Home.js

import React from 'react';
 
export default class Home extends React.Component {
 
    render() {
        console.log(this.props);
        return (
            <div>
                <h2>商品列表</h2>
            </div>
        );
    }
}

可以简写：

                    <Route path="/" exact render={() => <Home items={this.state.items} />} />

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.04-2
Branch：branch4

commit description：v3.04-2-example04-2（应用场景（二）- 如何给路由组件的组件参数传值？传递 props 给 component 指定的组件）

tag：v3.04-2

完善列表

src/css.css

ul {
    margin: 0;
    padding: 0;
}
 
li {
    list-style: none;
}
 
.item-list li {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px dotted #333;
}
.item-list li.head {
    font-weight: bold;
}
.item-list li span {
    min-width: 200px;
}
 
.pagination {
    margin: 10px;
}
.pagination a {
    margin: 0 5px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #f4f4f5;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: #606266;
    text-decoration: none;
}
.pagination a:hover {
    color: #409eff;
}
.pagination a.active {
    background-color: #409eff;
    color: #fff;
    cursor: text;
}
.pagination .goto {
    margin: 0 5px;
    box-sizing: border-box;
    width: 80px;
    height: 30px;
    border: 1px solid #dcdfe6;
    outline: none;
    text-align: center;
    vertical-align: top;
}

app.js

    import React from 'react';
 
    import {Route, Link} from 'react-router-dom';
 
    import './css.css';
 
    import Home from './views/Home';
    import About from './views/About';

    class App extends React.Component {
 
        constructor(props) {
            super(props);
 
            this.state = {
                items: [
                    {
                        id: 1,
                        name: 'iPhone XR',
                        price: 542500
                    },
                    {
                        id: 2,
                        name: 'Apple iPad Air 3',
                        price: 377700
                    },
                    {
                        id: 3,
                        name: 'Macbook Pro 15.4',
                        price: 1949900
                    },
                    {
                        id: 4,
                        name: 'Apple iMac',
                        price: 1629900
                    },
                    {
                        id: 5,
                        name: 'Apple Magic Mouse',
                        price: 72900
                    },
                    {
                        id: 6,
                        name: 'Apple Watch Series 4',
                        price: 599900
                    }
                ]
            }
        }
 
        render() {
 
            return (
                <div className="App">
                    <h1>React路由</h1>
                    <hr/>
 
                    <nav>
                        <Link to="/">首页</Link>
                        <span> | </span>
                        <Link to="/about">关于我们</Link>
                    </nav>
                    <hr/>
                    <Route path="/" exact render={() => <Home items={this.state.items} />} />
                    <Route path="/about" component={About}/>
                </div>
            )
        }
    }
    export default App;

src/views/Home.js

import React from 'react';
 
import Item from '../components/Item.js';
 
export default class Home extends React.Component {
 
    render() {
 
 
        let {items} = this.props;
 
        return (
            <div>
                <h2>商品列表</h2>
 
                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
                    {
                        items.map( item => <Item item={item} key={item.id} /> )
                    }
                </ul>
            </div>
        );
    }
 
}

src/components/Item.js

import React from "react";
import {Link} from "react-router-dom";
 
export default class Item extends React.Component{
 
    render() {
        let {item} = this.props;
 
        return(
            <li>
                <span>
                    <a href="">{item.name}</a>
                </span>
                {/*保留两位小数*/}
                <span>￥ {(item.price / 100).toFixed(2)}</span>
            </li>
        );
    }
 
}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.04-3
Branch：branch4

commit description：v3.04-3-example04-3（应用场景（二）- 完善首页列表）

tag：v3.04-3

2.3.2.3 渲染列表

Home.js

import React from 'react';
 
import {Link} from 'react-router-dom';
 
export default class Home extends React.Component {
 
    render() {
        let {items} = this.props;
 
        return (
            <div>
                <h2>商品列表</h2>
                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
                    {
                        items.map(item=>(
                            <li key={item.id}>
                                <span>
                                    <Link to={'/Item/' + item.id}>{item.name}</Link>
                                </span>
                                <span>￥ {(item.price / 100).toFixed(2)}</span>
                            </li>
                        ))
                    }
                </ul>
            </div>
        );
    }
 
}

2.3.2.3.1 example05

完善详情页

App.js

 
 
    import React from 'react';
 
    import {Route, Link} from 'react-router-dom';
 
    import './css.css';
 
    import Home from './views/Home';
    import About from './views/About';
    import View from "./views/View";
 
    class App extends React.Component {
 
        constructor(props) {
            super(props);
 
            this.state = {
                items: [
                    {
                        id: 1,
                        name: 'iPhone XR',
                        price: 542500
                    },
                    {
                        id: 2,
                        name: 'Apple iPad Air 3',
                        price: 377700
                    },
                    {
                        id: 3,
                        name: 'Macbook Pro 15.4',
                        price: 1949900
                    },
                    {
                        id: 4,
                        name: 'Apple iMac',
                        price: 1629900
                    },
                    {
                        id: 5,
                        name: 'Apple Magic Mouse',
                        price: 72900
                    },
                    {
                        id: 6,
                        name: 'Apple Watch Series 4',
                        price: 599900
                    }
                ]
            }
        }
 
        render() {
            return (
                <div className="App">
                    <h1>React路由</h1>
                    <hr/>
 
                    <nav>
                        <Link to="/">首页</Link>
                        <span> | </span>
                        <Link to="/about">关于我们</Link>
                    </nav>
                    <hr/>

                    <Route path="/" exact render={() => <Home items={this.state.items} />} />
 
                    {/*商品详情*/}
                    <Route path='/view' component={View}/>
 
                    <Route path="/about" component={About}/>
                </div>
            )
        }
 
    }   
    export default App;

src/components/Item.js

import React from "react";
import {Link} from "react-router-dom";
 
export default class Item extends React.Component{
 
    render() {
        let {item} = this.props;
 
        return(
            <li>
                <span>
                    <Link to={"/view/"}>{item.name}</Link>
                </span>
                {/*保留两位小数*/}
                <span>￥ {(item.price / 100).toFixed(2)}</span>
            </li>
        );
    }
 
}

src/views/View.js

import React from 'react';
 
export default class View extends React.Component {
 
    render() {
        return(
            <div>
                <h2>商品详情 </h2>
                <hr/>
                <p>其它一些详情信息...</p>
            </div>
        );
    }
 
}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.05
Branch：branch4

commit description：v3.05-example05（应用场景（二）- 增加点击详情功能）

tag：v3.05

如何往详情页里传递参数呢？我们点击的列表某一项需要把该项信息传递给详情页。

可能想到从item往上传给home再传给app，最终再给view。可想而知这样传参会非常恶心！

如果组件是页面组件，那么这个两个不同的页面组件之间的数据传递就不要通过传统组件父子通信来做，数据要通过页面（路由等方式来进行传递，或者local storage进行中转，或者redux中转，其实都是做统一存储的）

2.3.2.3.2 params

在路由中，params 指的是 path 部分可变的部分，在这里我们需要定义一个新的路由用来展示商品的详情，我们希望通过 /item/1 、/item/2、/item/…… 来访问对应 id 的商品，那么后面的数字部分就是可变的 - params，我们也称这样的路由为：动态路由

2.3.2.4 动态路由

为了能给处理上面的动态路由地址的访问，我们需要为 Route 组件配置特殊的 path

<Route path='/item/:id' component={Item} />

2.3.2.4.1 path-to-regexp

path-to-regexp 是一个专门用来处理 URL 的库，它用来了一种类似正则的字符串表示法

: 表示后面的部分为可变，: 后面的单词为匹配后的内容存储的名称，如：/item/1 ，就是 id=1

默认情况下，它为我们提供了几个常用的字符表示：*、?、+

但是我们可以通过 () 来使用正则

<Route path='/item/:id(\d+)' component={Item} />

上面表示 /item/ 后面只能是数字

2.3.2.4.2 Route : props

当动态路由匹配以后，我们可以通过对应组件的 props 属性来访问当前路由匹配信息

2.3.2.5 路由组件

如果一个组件是通过路由直接访问的，我们称为：路由组件 - 视图组件，其它的类型，根据具体功能可以称为：业务组件，UI 组件，容器组件，……

如果一个组件是路由组件，那么组件的 props 属性就会自动添加几个与路由有关的几个属性

history : 对象，提供了一些用于操作路由的方法，类似原生 JavaScript 中的 history 对象
location : 对象，通过它可以获取当前路由 URL 信息，类似原生 JavaScript 中的 history.location 对象
match : 对象，当前路由解析后的 URL 信息

2.3.2.5.1 example06

利用动态路由中转页面。

2.3.2.5.1.1 example06-1

下面的路由是动态，':'后面的 id 表示动态部分匹配到内容
当下 /view/XXXXX 才能匹配当前的路由

react-Novice05\app\src\App.js

import React from 'react';

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

import './css.css';

import Home from './views/Home';
import About from './views/About';
import View from "./views/View";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>

                <nav>
                    <Link to="/">首页</Link>
                    <span> | </span>
                    <Link to="/about">关于我们</Link>
                </nav>
                <hr/>

                <Route path="/" exact render={() => <Home items={this.state.items} />} />
                <Route path='/view/:id' component={View}/>
                <Route path="/about" component={About}/>
            </div>
        )
    }

}

export default App;

我们发现http://localhost:3000/view页面就看不到了，必须是这种形式：http://localhost:3000/view/参数页面才能显示，即满足"/view/:id" 这个规则页面才能匹配，这个参数就会在实际匹配当中赋值给id，:id其实就是一个变量，去接收路由当中与之匹配的参数。

可是现在参数为任何值都行，如果仅限数字呢？其实可以设置类似正则的规则。这里设置后面必须是数字，且至少1个。

<Route path="/view/:id(\d+)" component={View} />

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.06-1
Branch：branch4

commit description：v3.06-1-example06-1（应用场景（二）- 利用动态路由中转页面）

tag：v3.06-1

2.3.2.5.1.2 example06-2

src/components/Item.js

import React from "react";
import {Link} from "react-router-dom";
 
export default class Item extends React.Component{
 
    render() {
        let {item} = this.props;
 
        return(
            <li>
                <span>
                    <Link to={"/view/" + item.id}>{item.name}</Link>
                </span>
                {/*保留两位小数*/}
                <span>￥ {(item.price / 100).toFixed(2)}</span>
            </li>
        );
    }
 
}

从动态路由 url中拿到:id对应的内容

src/views/View.js

import React from 'react';
 
export default class View extends React.Component {
 
    render() {
 
        console.log(this.props);
 
        return(
            <div>
                <h2>商品详情 </h2>
                <p>其它一些详情信息...</p>
            </div>
        );
    }
 
}

我们发现我们没有往view的props传内容，怎么多了很多东西。

BrowserRouter是容器组件，这里我们App嵌套在其内，它会给App注入东西。我们看下伪代码：

BrowserRouter大致伪代码：

    class BrowserRouter extends React.Component {
 
        render() {
            
            // 渲染子组件
 
            return this.props.children; // 返回子组件
        }
 
    }

App.js中用route伪代码：

    class Route extends React.Component {
 
        render() {
             // component是我们在标签上写的组件属性
 			// 增加一些对象
            this.props.component.props.history;
            this.props.component.props.match;
            this.props.component.props.location;
 
            return this.props.component; // 我们所写的component属性
        }
 
    }

如果一个组件是路由组件（路由直接绑定并访问的组件），那么该组件就会被自动注入（靠BrowserRouter容器组件注入）

history: 同(html5)history api 类似，可跳页面

match: 当前访问的路由信息

location: 等同原生的location

view.js

import React from 'react';
 
export default class View extends React.Component {
 
    render() {
 
        // console.log(this.props);
        let {id} = this.props.match.params;
        console.log(id)
 
 
        return(
            <div>
                <h2>商品详情 </h2>
                <p>其它一些详情信息...</p>
            </div>
        );
    }
 
}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.06-2
Branch：branch4

commit description：v3.06-2-example06-2（应用场景（二）- 利用动态路由中转页面—路由容器组件注入对象属性）

tag：v3.06-2

2.3.2.5.2 match : params

this.props.match.params.id

注意：非路由组件是没有路由数据的

如果一个组件既要接收手动传入的 props，又想接收路由信息
<Route path='/item/:id(\d+)' render={props => <Item {...props} items={this.state.items} />} />

商品详情

render() {
  let items = this.props.items;
  let id = Number(this.props.match.params.id) || 0;
  let item = items.find(item => item.id === id);
 
  return item ? (
    <div>
      <h2>商品详情 - {item.name}</h2>
      <dt>ID</dt>
      <dd>{item.id}</dd>
      <dt>名称</dt>
      <dd>{item.name}</dd>
      <dt>价格</dt>
      <dd>￥ {(item.price / 100).toFixed(2)}</dd>
    </div>
  ) : <div>不存在该商品！</div>;
}

2.3.2.5.2.1 example07

目前我们可以通过url拿到id，但视图组件所需要的数据从何而来？我们现在需要拿着id，去数据中找到对应项，然后展示出来。后期可能直接给后端发请求，去要数据了，即前端不去做而是去向后端发请求。

app.js

 
 
    import React from 'react';
 
    import {Route, Link} from 'react-router-dom';
 
    import './css.css';
 
    import Home from './views/Home';
    import About from './views/About';
    import View from "./views/View";
 
 
    class App extends React.Component {
 
        constructor(props) {
            super(props);
 
            this.state = {
                items: [
                    {
                        id: 1,
                        name: 'iPhone XR',
                        price: 542500
                    },
                    {
                        id: 2,
                        name: 'Apple iPad Air 3',
                        price: 377700
                    },
                    {
                        id: 3,
                        name: 'Macbook Pro 15.4',
                        price: 1949900
                    },
                    {
                        id: 4,
                        name: 'Apple iMac',
                        price: 1629900
                    },
                    {
                        id: 5,
                        name: 'Apple Magic Mouse',
                        price: 72900
                    },
                    {
                        id: 6,
                        name: 'Apple Watch Series 4',
                        price: 599900
                    }
                ]
            }
        }
 
        render() {
 
            return (
                <div className="App">
                    <h1>React路由</h1>
                    <hr/>
                    <nav>
                        <Link to="/">首页</Link>
                        <span> | </span>
                        <Link to="/about">关于我们</Link>
                    </nav>
                    <hr/>
                    <Route path="/" exact render={() => <Home items={this.state.items} />} />
                    <Route path="/view/:id(\d+)" render={() => {
                        return <View />
                    }} />
                    <Route path="/about" component={About}/>
                </div>
            )
        }
 
    }
 
    export default App;

视图组件所需要的数据从何而来？？？？？？？？？？？？？？？？？？

view.js

import React from 'react';
 
export default class View extends React.Component {
 
    render() {

        console.log(this.props);
        let {id} = this.props.match.params;
        console.log(id)
 
        return(
            <div>
                <h2>商品详情 </h2>
                <p>其它一些详情信息...</p>
            </div>
        );
    }
 
}

报错（挂了）原因：View不在是路由组件了，那么也就表示 Route 注入的路由相关信息就没有了，即history、 match、location等参数对象就没了。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.07-1
Branch：branch4

commit description：v3.07-1-example07-1（应用场景（二）- 完善详情页，跳转页面报错）

tag：v3.07-1

如果使用了render 函数，那么路由注入的 history、match 等对象都作为参数传递给了render函数了
render其实就是一个函数式的组件

                    <Route path="/view/:id(\d+)" render={(props) => {
                        return <View />
                        console.log(props);
                    }} />
                    <Route path="/about" component={About}/>

src/App.js

 
 
    import React from 'react';
 
    import {Route, Link} from 'react-router-dom';
 
    import './css.css';
 
    import Home from './views/Home';
    import About from './views/About';
    import View from "./views/View";
 
    class App extends React.Component {
 
        constructor(props) {
            super(props);
 
            this.state = {
                items: [
                    {
                        id: 1,
                        name: 'iPhone XR',
                        price: 542500
                    },
                    {
                        id: 2,
                        name: 'Apple iPad Air 3',
                        price: 377700
                    },
                    {
                        id: 3,
                        name: 'Macbook Pro 15.4',
                        price: 1949900
                    },
                    {
                        id: 4,
                        name: 'Apple iMac',
                        price: 1629900
                    },
                    {
                        id: 5,
                        name: 'Apple Magic Mouse',
                        price: 72900
                    },
                    {
                        id: 6,
                        name: 'Apple Watch Series 4',
                        price: 599900
                    }
                ]
            }
        }
 
        render() {
            return (
                <div className="App">
                  
 
                    <nav>
                        <Link to="/">首页</Link>
                        <span> | </span>
                        <Link to="/about">关于我们</Link>
                    </nav>
                    <hr/>
                    <Route path="/" exact render={() => <Home items={this.state.items} />} />
 
                    <Route path="/view/:id(\d+)" render={(props) => {
                        // es5 写法太长了
                        // return <View match={props.match} history={props.history} location={props.location} />
                        // es6写法比较简练，解构（扩展运算符）
                        return <View {...props} items={this.state.items} />
                    }} />
                    <Route path="/about" component={About}/>
                </div>
            )
        }
 
    }
 
    export default App;

src/components/Item.js

import React from "react";
import {Link} from "react-router-dom";
 
export default class Item extends React.Component{
 
    render() {
        let {item} = this.props;
 
        return(
            <li>
                <span>
                    <Link to={"/view/" + item.id}>{item.name}</Link>
                </span>
                {/*保留两位小数*/}
                <span>￥ {(item.price / 100).toFixed(2)}</span>
            </li>
        );
    }
 
}

src/views/View.js

import React from 'react';
 
export default class View extends React.Component {
 
    render() {

        // 解构
        let {items, match: {params: {id}}} = this.props;
        id = Number(id);
 
        let item = items.find( v => v.id === id );
 
        console.log(items, id, item);
 
        return(
            <div>
                <h2>商品详情 - {item.name}</h2>
                <p>其它一些详情信息...</p>
            </div>
        );
    }
 
}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.07-2
Branch：branch4

commit description：v3.07-2-example07-2（应用场景（二）- 完善详情页，跳转页面最终版）

tag：v3.07-2

2.3.2.6 通信小结

从动态路由 url中拿到 :id对应的内容
视图组件所需要的数据从何而来？？？？？？？？？？？？？？？？？？（肯定涉及两个位置，从a到b，如果只有一个组件，就谈不上组件数据从何而来的问题了，即通信问题了）
组件获取数据的方式：
- 组件的（参数传递）父子通信，由父级传参把数据传进来
- 通过与该组件对应的 url传递过来，组件肯定与url是有关联的，我们需要把组件需要的数据挂载到url上面，然后当组件渲染的时候，再去检查url上某个位置的数据
- 通过后端获取：在组件的一些生命周期中发送请求（ajax）
- 通过本地存储（不推荐，因为它有大小限制）
- 全局变量（内存），如把数据挂载到window底下，到数据渲染的时候，再从window下面取（一般情况下，是不推荐的，它类似于redux，除非有更好方式管理和维护全局变量，否则就容易乱套了）
- …（还有很多方式，但只关注一点，凡是涉及到数据通信，当前能访问的方式，如下）
数据通信选择何种方式
- 如果是组件不是嵌套关系（如本例），我们选择方案1，就会涉及到通信步骤太多的问题，你需要一层层的传，会很繁琐
- 实际两组件是嵌套关系，即父子级关系，或者兄弟关系（它们共同父级就在上一层，不太多），可用方案1
- 方案2其实适合两个组件不同时存在的时候，如有view，就没item，即在一个页面中两个不同时显示，两个组件是互不见面的，但是可从url将view的数据带给item，但仅限小批量的数据

2.3.3 应用场景（三）

我想增加一个功能，用户可以按照商品价格的高低进行选择展示

2.3.3.1 通过 JavaScript 实现排序切换

Home.js

...
this.state = {
      sort: 'desc'
 
      this.changeSort = this.changeSort.bind(this);
}
...
changeSort({target: {value: sort}}) {
      this.setState({sort});
}
...
render() {
      let {items} = this.props;
      let {sort} = this.state;
      items = items.sort((a, b) => sort === 'asc'  ? a.price - b.price : b.price - a.price);
      return(
          ...
          <select value={sort} onChange={this.changeSort}>
          <option value="desc">从高到低</option>
          <option value="asc">从低到高</option>
          </select>
          ...
    )
}

问题：刷新页面、分享 URL 都会丢失状态

2.3.3.1.1 example08

js实现排序

2.3.3.1.1.1 example08-1

src/views/Home.js

import React from 'react';
 
import Item from '../components/Item.js';
 
export default class Home extends React.Component {
 
 
    render() {
 
 
        let {items} = this.props;
 
        items = items.sort( (a, b) => {
            return b.price - a.price;
        } );
 
 
        return (
            <div>
                <h2>商品列表</h2>
 
                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
 
                    {
                        items.map( item => <Item item={item} key={item.id} /> )
                    }
                </ul>
            </div>
        );
    }
 
}

降序排列：

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.08-1
Branch：branch4

commit description：v3.08-1-example08-1（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-js实现-简单的降序排列）

tag：v3.08-1

2.3.3.1.1.2 example08-2

import React from 'react';
 
import Item from '../components/Item.js';
 
export default class Home extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.sort = this.sort.bind(this);
    }
 
    sort(e) {
        console.log(e.target.value);
 
        let {items} = this.props;
 
        items = items.sort( (a, b) => {
            return 'desc' === e.target.value ? b.price - a.price : a.price - b.price;
        } );
 
        this.setState({
            items
        });
    }
 
    render() {
 
        let {items} = this.props;
 
        return (
            <div>
                <h2>商品列表</h2>
 
                <select onChange={this.sort}>
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>
 
                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
                    {
                        items.map( item => <Item item={item} key={item.id} /> )
                    }
                </ul>
            </div>
        );
    }
 
}

发现没有设置默认排序。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.08-2
Branch：branch4

commit description：v3.08-2-example08-2（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-js实现-实现切换排序）

tag：v3.08-2

2.3.3.1.1.3 example08-3

我们需要先设置一下默认排序状态，可以封装一下：

import React from 'react';
 
import Item from '../components/Item.js';
 
export default class Home extends React.Component {
 
    constructor(props) {
        super(props);
 
        // 默认降序，赋给state
        this.state = {
            items: this.doSort('desc')
        };
 
        this.sort = this.sort.bind(this);
    }
 
    sort(e) {
        console.log(e.target.value);
 
        let items = this.doSort(e.target.value);
        this.setState({
            items
        });
    }
 
    doSort(type = 'desc') {
        let {items} = this.props;
 
        return items.sort( (a, b) => {
            return 'desc' === type ? b.price - a.price : a.price - b.price;
        } );
    }
 
 
    render() {
        // 取默认排序好的items
        let {items} = this.state;
 
        return (
            <div>
                <h2>商品列表</h2>
 
                <select onChange={this.sort}>
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>
 
                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
                    {
                        items.map( item => <Item item={item} key={item.id} /> )
                    }
                </ul>
            </div>
        );
    }
 
}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.08-3
Branch：branch4

commit description：v3.08-3-example08-3（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-js实现-切换排序添加默认降序排序）

tag：v3.08-3

存在问题：

1、假如数据很多，就需要进行分页了。

2、如果把排序好的页面分享好别人，别人打开的页面是默认降序排序，则可能拿到的页面就不同了，所以我们这里排序最好也保留状态（通过url也能判断出排序状态）。（排序功能不要影响url地址本身，否则路由看不清楚了，即不影响url资源同时又可携带数据，因此需要用到queryString）

2.3.3.2 通过路由实现排序切换

2.3.3.2.1 queryString

通常我们把 URL ? 后面的内容称为 queryString，在 React.js 中，我们可以通过 this.props.location.search 来获取，它的值是字符串，格式为：?k1=v1&k2=v2，为了方便操作，我们把它转成对象形式

/api/users 这个地址代表与用户有关的所有数据，假设数据有10000条，而只希望看到一部分的话，就相当于需要带查询条件，例如：/api/users ?page=1 queryString 其实就带着某种和条件去获取资源

回归正题：我们可以设置为localhost:3000/?sort=desc

2.3.3.2.2 URLSearchParams

在原生 JavaScript 中内置了一个 URLSearchParams 的类，我们通过它可以很方便的操作 queryString

let {location: {search}} = this.props;
let qs = new URLSearchParams(search);
let sort = qs.get('sort');

2.3.3.3 扩展

2.3.3.3.1 qs 库

https://www.npmjs.com/package/qs

2.3.3.3.2 安装

npm i -S qs

2.3.3.3.3 使用

search：解析的字符串

ignoreQueryPrefix：是否忽略问号

import queryString from 'qs';
 
let qsTest = queryString.parse(search, {ignoreQueryPrefix: true});
let sort = qsTest.sort;

2.3.3.3.4 通过 JavaScript 编程的方式切换路由

除了使用 <Link> 组件像 a 一样点击跳转路由，我们还可以通过编程的方式（JavaScript）来切换路由

let {history} = this.props;

<select defaultValue={sort} onChange={({target:{value}})=>{
    history.push('/?sort=' + value);
  }}>
  <option value="desc">从高到低</option>
  <option value="asc">从低到高</option>
</select>

2.3.3.3.5 example09

通过路由实现排序切换

2.3.3.3.5.1 example09-1

home.js

// 从 url 的 querystring 上来获取
        console.log(window.location);

        // 从 url 的 querystring 上来获取
        console.log(window.location.search);

我们把问号截取掉！

    // 从 url 的 querystring 上来获取
    console.log(window.location.search.substring(1));

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.09-1
Branch：branch4

commit description：v3.09-1-example09-1（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-获取querystring）

tag：v3.09-1

2.3.3.3.5.2 example09-2

以上代码是：key=value的格式，我们如何取到value呢？我们可以将其转为对象去取，或者使用第三方的库（如：qs库）。

原生方法：

    let queryString = window.location.search.substring(1);
    // 作用：将queryString转为对象形式
    let qs = new URLSearchParams(queryString);
    console.log(qs);

用get方法取值：

    let queryString = window.location.search.substring(1);
    // 作用：将queryString转为对象形式
    let qs = new URLSearchParams(queryString);
    console.log(qs.get('sort'));

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.09-2
Branch：branch4

commit description：v3.09-2-example09-2（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-原生js获取querystring中的值）

tag：v3.09-2

2.3.3.3.5.3 example09-3

queryString：解析的字符串

ignoreQueryPrefix：是否忽略问号

    import qs from 'qs';        

    let queryString = window.location.search.substring(1);
    // 作用：将queryString转为对象形式
    let qsTest = qs.parse(queryString, {ignoreQueryPrefix: true});
    let sort = qsTest.sort;
    console.log(sort);

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.09-3
Branch：branch4

commit description：v3.09-3-example09-3（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-qs库获取querystring中的值）

tag：v3.09-3

2.3.3.3.5.4 example09-4

以上我们是通过原生js获取的queryString，同时还可以通过组件对象获取。刚刚我们讲过路由组件渲染的时候，如果一个组件是路由组件（路由直接绑定并访问的组件），那么该组件就会被自动注入：

history: 同(html5)history api类似，可跳页面
match: 当前访问的路由信息
location: 等同原生的 location

react-Novice05\app\src\App.js

import React from 'react';

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

import './css.css';

import Home from './views/Home';
import About from './views/About';
import View from "./views/View";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>

                <nav>
                    <Link to="/">首页</Link>
                    <span> | </span>
                    <Link to="/about">关于我们</Link>
                </nav>
                <hr/>

                <Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                <Route path="/view/:id(\d+)" render={(props) => {
                    return <View {...props} items={this.state.items} />
                }} />
                <Route path="/about" component={About}/>
            </div>
        )
    }

}

export default App;

react-Novice05\app\src\views\Home.js

import React from 'react';

import Item from '../components/Item.js';
import qs from 'qs';

export default class Home extends React.Component {

    constructor(props) {
        super(props);

        // 默认降序，赋给state
        this.state = {
            items: this.doSort('desc')
        };

        this.sort = this.sort.bind(this);
    }

    sort(e) {
        console.log(e.target.value);

        let items = this.doSort(e.target.value);
        this.setState({
            items
        });
    }

    doSort(type = 'desc') {
        let {items} = this.props;

        return items.sort( (a, b) => {
            return 'desc' === type ? b.price - a.price : a.price - b.price;
        } );
    }

    render() {

        // 取默认排序好的items
        let {items} = this.state;

        console.log(this.props)

        let queryString = window.location.search.substring(1);
        // 作用：将queryString转为对象形式
        let qsTest = qs.parse(queryString, {ignoreQueryPrefix: true});
        let sort = qsTest.sort;

        return (
            <div>
                <h2>商品列表</h2>

                <select onChange={this.sort}>
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>

                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
                    {
                        items.map( item => <Item item={item} key={item.id} /> )
                    }
                </ul>
            </div>
        );
    }

}

可在location的search中取值。

        let {location} = this.props;

        // let queryString = window.location.search.substring(1);
        let queryString = location.search.substring(1);
        // 作用：将queryString转为对象形式
        let qsTest = qs.parse(queryString, {ignoreQueryPrefix: true});
        let sort = qsTest.sort;
        console.log(sort);

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.09-4
Branch：branch4

commit description：v3.09-4-example09-4（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-通过组件对象获取queryString）

tag：v3.09-4

2.3.3.3.5.5 example09-5

完善排序切换选项卡功能：

用户在select标签中选择的时候，我们不希望它是受控组件（这里的值与state进行绑定），目前sort变量的值并不在组件内部，其实用户选择排序的时候，没有必要去修改sort变量的值，只需要跳页面就行了。因此我们给它绑定一个defaultvalue属性（绑定非受控）即可。

import React from 'react';

import Item from '../components/Item.js';
import qs from 'qs';

export default class Home extends React.Component {

    constructor(props) {
        super(props);

        // 默认降序，赋给state
        this.state = {
            items: this.doSort('desc')
        };

        this.sort = this.sort.bind(this);
    }

    sort(e) {
        // let items = this.doSort(e.target.value);
        // this.setState({
        //     items
        // });
        // 跳转页面
        let {history} = this.props;
        history.push(`/?sort=${e.target.value}`)
    }

    doSort(type = 'desc') {
        let {items} = this.props;

        return items.sort( (a, b) => {
            return 'desc' === type ? b.price - a.price : a.price - b.price;
        } );
    }

    render() {

        // 取默认排序好的items
        let {items} = this.state;
        let {location} = this.props;

        // let queryString = window.location.search.substring(1);
        let queryString = location.search.substring(1);
        // 作用：将queryString转为对象形式
        let qsTest = qs.parse(queryString, {ignoreQueryPrefix: true});
        let sort = qsTest.sort || 'desc';

        this.doSort(sort);

        return (
            <div>
                <h2>商品列表</h2>

                <select defaultValue={sort} onChange={this.sort}>
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>

                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
                    {
                        items.map( item => <Item item={item} key={item.id} /> )
                    }
                </ul>
            </div>
        );
    }

}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.09-5
Branch：branch4

commit description：v3.09-5-example09-5（应用场景（三）- 用户可以按照商品价格的高低进行选择展示-完善排序切换选项卡功能最终版）

tag：v3.09-5

2.3.4 应用场景（四）

现在，我想给页面顶部的导航加上高亮效果，用来标识当前页面。这个时候，我们就可以使用 react-router-dom 提供的 NavLink 组件来实现

2.3.4.1 NavLink 组件

NavLink 与 Link 类似，但是它提供了两个特殊属性用来处理页面导航

2.3.4.1.1 activeStyle

当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式

2.3.4.1.2 activeClassName

与 activeStyle 类似，但是激活的是 className

2.3.4.1.3 isActive（类似回调，可以处理一些更为复杂的情况）

默认情况下，匹配的是 URL 与 to 的设置，通过 isActive 可以自定义激活逻辑，isActive 是一个函数，返回布尔值

index.js

<NavLink to="/" activeStyle={{color:'red'}} isActive={(match, location) => {
    return match || location.pathname.startsWith('/item')
}} exact>Home</NavLink>
<span> | </span>
<NavLink to="/about" activeStyle={{color:'red'}} exact>About</NavLink>

2.3.4.1.4 exact

精确匹配

2.3.4.2 example10

NavLink 组件（导航组件）

2.3.4.2.1 example10-1

activeStyle：当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式

react-Novice05\app\src\App.js

import React from 'react';

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

import './css.css';

import Home from './views/Home';
import About from './views/About';
import View from "./views/View";
import NavLink from "react-router-dom/modules/NavLink";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>

                <nav>
                    <NavLink to="/" activeStyle={{color: 'red'}}>首页</NavLink>
                    <span> | </span>
                    <NavLink to="/about" activeStyle={{color: 'red'}}>关于我们</NavLink>
                </nav>
                <hr/>

                <Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                <Route path="/view/:id(\d+)" render={(props) => {
                    return <View {...props} items={this.state.items} />
                }} />
                <Route path="/about" component={About}/>
            </div>
        )
    }

}

export default App;

不过，明显发现存在问题！为什么点击关于我们后，首页仍然会高亮！因为默认情况下，它属于一种模糊匹配，即非精确匹配。因为此时"/about"也同时满足"/" 的规则，所以"/about"会把两种都匹配上！

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.10-1
Branch：branch4

commit description：v3.10-1-example10-1（应用场景（四）- 页面顶部的导航加上高亮效果-未精确匹配）

tag：v3.10-1

2.3.4.2.2 example10-2

完善精确匹配：

学会看文档

import React from 'react';

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

import './css.css';

import Home from './views/Home';
import About from './views/About';
import View from "./views/View";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>

                <nav>
                    <NavLink to="/" activeStyle={{color: 'red'}} exact={true}   >首页</NavLink>
                    <span> | </span>
                    <NavLink to="/about" activeStyle={{color: 'red'}}>关于我们</NavLink>
                </nav>
                <hr/>

                <Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                <Route path="/view/:id(\d+)" render={(props) => {
                    return <View {...props} items={this.state.items} />
                }} />
                <Route path="/about" component={About}/>
            </div>
        )
    }

}

export default App;

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.10-2
Branch：branch4

commit description：v3.10-2-example10-2（应用场景（四）- 页面顶部的导航加上高亮效果-精确匹配）

tag：v3.10-2

2.3.4.2.3 example10-3

isActive（类似回调，可以处理一些更为复杂的情况）:

默认情况下，匹配的是 URL 与 to 的设置，通过 isActive 可以自定义激活逻辑，isActive 是一个函数，返回布尔值

isActive属性什么时候使用呢？

以上example10-2的原理是url与to属性按照某种规则进行比较，如果比较后满足规则，则激活设置的样式。

如果我们点进详情（即访问内页），此时的url与我们上述的to属性都匹配不上了，此时怎么高亮呢？这个时候就不能用它了，得需要我们自己去定规则了。

<nav>
    <NavLink to="/" exact={true} activeStyle={{color: 'red'}} isActive={(match, location) => {
        // match当前匹配的 location 当前地址栏信息
        console.log(match, location);
    }}>首页</NavLink>
    <span> | </span>
    <NavLink to="/about" activeStyle={{color: 'red'}} >关于我们</NavLink>
</nav>

当点击详情页，match为null，表示当前没有匹配项，即当前访问的地址是不匹配的（与当前的属性to）。

                <nav>
                    <NavLink to="/" exact={true} activeStyle={{color: 'red'}} isActive={(match, location) => {
                        // match当前匹配的 location 当前地址栏信息
                        // console.log(match, location);
                        // match 为真后面无需处理 否则以'/view'命名开始
                        return match || location.pathname.startsWith('/view');
                    }}>首页</NavLink>
                    <span> | </span>
                    <NavLink to="/about" activeStyle={{color: 'red'}}>关于我们</NavLink>
                </nav>

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.10-3
Branch：branch4

commit description：v3.10-3-example10-3（应用场景（四）- 页面顶部的导航加上高亮效果-完成）

tag：v3.10-3

2.3.5 应用场景（五）

当用户访问不存在的路由，我们需要提供一个反馈页面，也就是 404（友好页面）

index.js

<Route exact path='/' render={props => <Home {...props} items={this.state.items} />} />
<Route path='/about' component={About} />
<Route path='/item/:id(\d+)' render={props => <Item {...props} items={this.state.items} />} />
{/*NotFound*/}
<Route component={NotFound} />

NotFound.js

import React from 'react';
 
export default function NotFound() {
    return (
        <div>
            Not Found
        </div>
    );
}

默认情况下，React.js 会渲染所有与之匹配的路由组件，上面的案例中，当我们访问任意路由（如：/about），也会匹配 NotFound 路由组件渲染

2.3.5.1 Switch 组件

该组件只会渲染首个被匹配的组件

<Switch>
      <Route exact path='/' render={props => <Home {...props} items={this.state.items} />} />
    <Route path='/about' component={About} />
    <Route path='/item/:id(\d+)' render={props => <Item {...props} items={this.state.items} />} />
    {/*NotFound*/}
    <Route component={NotFound} />
</Switch>

2.3.5.2 example11

实现 404（友好页面）

2.3.5.2.1 example11-1

src/views/NotFound.js

import React from 'react';
 
export default class NotFound extends React.Component {
 
 
    render() {
        return (
            <div>
                <h1>Not Found - 404</h1>
            </div>
        );
    }
 
}

App.js

<Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                    <Route path="/view/:id(\d+)" render={(props) => {
                        return <View {...props} items={this.state.items} />
                    }} />
                    <Route path="/about" component={About}/>
                    <Route component={NotFound} />

每一个页面均包含了404页面组件。因为没有设置path，就代表实际默认为通配符，可匹配任何路径，即每一个页面均包含了404页面组件。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.11-1
Branch：branch4

commit description：v3.11-1-example11-1（应用场景（五）- 实现 404（友好页面），遇到问题）

tag：v3.11-1

2.3.5.2.2 example11-2

默认react的路由具有穿透性

如js当中的switch语句，这里去掉break，则打印b和c，满足第一个变量a的值之后，如果没有break，则继续往下穿透。我们路由穿透的概念的就与这个类似，因此所有页面都显示。

let a = 2;
switch (a) {
    case 1:
        console.log('a');
        // break;
    case 2:
        console.log('b');
        // break;
    case 3:
        console.log('c');
        // break;
}

我们用switch组件来解决以上问题

                <Switch>
                    <Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                    <Route path="/view/:id(\d+)" render={(props) => {
                        return <View {...props} items={this.state.items} />
                    }} />
                    <Route path="/about" component={About}/>
                    <Route component={NotFound} />
                </Switch>

如果把notfound组件放在最前面，则所有页面都是404，那是应为它是通配的，没设置规则，任何页面都符合，因此在实际开发中要十分注意这种顺序问题。（这块代码较为简单，小迪就不git了）

                <Switch>
                    <Route component={NotFound} />
                    <Route path="/" exact render={(props) => {
                        return <Home items={this.state.items} {...props} />
                    }} />
 
                    <Route path="/view/:id(\d+)" render={(props) => {
                        return <View {...props} items={this.state.items} />
                    }} />
                    <Route path="/about" component={About}/>
 
                </Switch>

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.11-2
Branch：branch4

commit description：v3.11-2-example11-2（应用场景（五）- 实现 404（友好页面），完成）

tag：v3.11-2

2.3.6 应用场景（六）

现在，我们要给用户增加一个购物车的功能

index.js

// 添加一个连接
<NavLink to="/cart" activeStyle={{color:'red'}} exact>Cart</NavLink>

Cart.js

// 购物车组件
import React from 'react';
 
export default class Cart extends React.Component {
 
    render() {
        return(
            <div>
                购物车
            </div>
        );
    }
 
}

我们还要配一个用户系统，比如：注册登录啥的

index.js

// 模拟一个添加登录用户状态的 state
this.state = {
      users: [
      {
        id: 1,
        username: 'zs',
        password: '123'
      },
      {
        id: 2,
        username: 'ls',
        password: '123'
      },
      {
        id: 3,
        username: 'ww',
        password: '123'
      },
      {
        id: 4,
        username: 'gg',
        password: '123'
      }
    ],
    userInfo: {
          id: 0,
          username: ''
    },
      ...
}
 
// 添加一个登录链接
{
      this.state.userInfo.id > 0 ? (
              <span>{this.state.userInfo.username}</span>
      ) : (
            <NavLink to='/login' activeStyle={{color:'red'}} exact>Login</NavLink>
      )
}

2.3.6.1 example12

实现购物界面

react-Novice05\app\src\views\Cart.js

import React from 'react';

export default class Cart extends React.Component {

    render() {
        return(
            <div>
                购物车
            </div>
        );
    }

}

react-Novice05\app\src\App.js

import React from 'react';

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

import './css.css';

import Home from './views/Home';
import About from './views/About';
import View from "./views/View";
import NotFound from "./views/NotFound";
import Cart from "./views/Cart";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>

                <nav>
                    <NavLink to="/" exact={true} activeStyle={{color: 'red'}} isActive={(match, location) => {
                        // match当前匹配的 location 当前地址栏信息
                        // console.log(match, location);
                        // match 为真后面无需处理 否则以'/view'命名开始
                        return match || location.pathname.startsWith('/view');
                    }}>首页</NavLink>
                    <span> | </span>
                    <NavLink to="/cart" activeStyle={{color:'red'}} exact>购物车</NavLink>
                    <span> | </span>
                    <NavLink to="/about" activeStyle={{color: 'red'}}>关于我们</NavLink>
                </nav>
                <hr/>
                <Switch>
                    <Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                    <Route path="/view/:id(\d+)" render={(props) => {
                        return <View {...props} items={this.state.items} />
                    }} />
                    <Route path="/cart" component={Cart}/>
                    <Route path="/about" component={About}/>
                    <Route component={NotFound} />
                </Switch>
            </div>
        )
    }

}

export default App;

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.12
Branch：branch4

commit description：v3.12-example12（应用场景（六）- 实现购物界面）

tag：v3.12

2.3.6.2 Redirect 组件

未登录用户是不能访问购物车的，所以，我们需要在访问购物车的时候加入用户权限验证（鉴权），如果没有登录则跳转到登录

index.js

<Route path='/cart' render={props => {
    if (this.state.userInfo.uid > 0) {
              return <Cart />;
    } else {
              // return <Login />;
              return <Redirect to='/login' />;
    }
}}  />

2.3.6.2.1 to

设置跳转的 URL

登录代码

// index.js
login({username, password}) {
  return new Promise( (resolve, reject) => {
    if (!username || !password) {
      reject('请输入用户名和密码');
    }
 
    let user = this.state.users.find(user => user.username === username && user.password === password);
    if ( !user ) {
      reject('用户不存在或者密码错误');
    }
 
    this.setState({
      userInfo: {
        id: user.id,
        username: user.username
      }
    });
 
    resolve('登录成功');
  } );
}
...
<Route path='/login' component={props => {
    return <Login {...props} onLogin={this.login.bind(this)} />;
}} />
 
// login.js
import React from 'react';
 
export default class Login extends React.Component {
 
    constructor(...props) {
        super(...props);
 
        this.login = this.login.bind(this);
 
        this.usernameRef = React.createRef();
        this.passwordRef = React.createRef();
    }
 
    login() {
        let {onLogin, history: {push}} = this.props;
 
        if (typeof onLogin === 'function') {
            onLogin({
                username: this.usernameRef.current.value,
                password: this.passwordRef.current.value
            }).then(msg=>{
                alert(msg);
                push('/');
            }).catch(e=>alert(e));
        }
    }
 
    render() {
        return(
            <div>
                <p>
                    用户名：<input type="text" ref={this.usernameRef} />
                </p>
                <p>
                    密码：<input type="password" ref={this.passwordRef} />
                </p>
                <p>
                    <button onClick={this.login}>登录</button>
                </p>
            </div>
        );
    }
 
}

2.3.6.2.2 example13

然而根据需求，其实是有了登录才能有购物车这个功能的，我们暂时不实现一个完整的登录注册了，暂时模拟一个。

我们访问购物车，不能再像上述直接访问了，而是判断用户。

react-Novice05\app\src\views\Login.js

import React from 'react';

export default class Login extends React.Component {

    render() {
        return(
            <div>
                登录
            </div>
        );
    }

}

react-Novice05\app\src\App.js

import React from 'react';

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

import './css.css';

import Home from './views/Home';
import About from './views/About';
import View from "./views/View";
import NotFound from "./views/NotFound";
import Cart from "./views/Cart";
import Redirect from "react-router-dom/es/Redirect";
import Login from "./views/Login";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            // 用户信息
            userInfo: {
                id: 0,
                username: ''
            },

            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>

                <nav>
                    <NavLink to="/" exact={true} activeStyle={{color: 'red'}} isActive={(match, location) => {
                        // match当前匹配的 location 当前地址栏信息
                        // console.log(match, location);
                        // match 为真后面无需处理 否则以'/view'命名开始
                        return match || location.pathname.startsWith('/view');
                    }}>首页</NavLink>
                    <span> | </span>
                    <NavLink to="/cart" activeStyle={{color:'red'}} exact>购物车</NavLink>
                    <span> | </span>
                    <NavLink to="/about" activeStyle={{color: 'red'}}>关于我们</NavLink>
                </nav>
                <hr/>
                <Switch>
                    <Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                    <Route path="/view/:id(\d+)" render={(props) => {
                        return <View {...props} items={this.state.items} />
                    }} />
                    <Route path="/cart" component={() => {
                        if (this.state.userInfo.id > 0) {
                            return <Cart />;
                        } else {
                            // 重定向组件
                            return <Redirect to='/login' />;
                        }
                    }}/>
                    <Route path="/login" activeStyle={{color:'red'}} exact component={Login}/>
                    <Route path="/about" component={About}/>
                    <Route component={NotFound} />
                </Switch>
            </div>
        )
    }

}

export default App;

        this.state = {
            // 用户信息
            userInfo: {
                id: 1,
                username: ''
            },
            ......
        }

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.13
Branch：branch4

commit description：v3.13-example13（应用场景（六）- 实现购物界面加登录权限控制）

tag：v3.13

2.3.7 应用场景（七）

随着产品的增多，那么多的数据就不可能一次性全部展示出来，所以我们为商品的展示添加一个分页功能。分页组件是功能组件。

// Pagination.js
import React from 'react';
import PropTypes from 'prop-types';
 
import {withRouter, Link} from 'react-router-dom';
 
class Pagination extends React.Component {
 
    static defaultProps = {
        pages: 1,
        page: 1
    }
 
    static propTypes = {
        pages: PropTypes.number,
        page: PropTypes.number
    }
 
    render() {
 
        let {pages, page, history: {push}} = this.props;
        // console.log(this.props);
 
        return (
            <div className="pagination">
                {
                    (new Array(pages)).fill('').map((v, i) => {
                        return (
                            <Link
                                key={++i}
                                className={i === page ? 'active' : ''}
                                to={'/'+i}
                            >
                                {i}
                            </Link>
                        );
                    })
                }
                前往
                <input type="text" className="goto" onKeyDown={({target:{value}})=>{
                    if (value !== '') {
                        push('/' + value);
                    }
                }} />
                页
            </div>
        );
    }
 
}
 
export default withRouter(Pagination);

2.3.7.1 withRouter 组件（高阶组件）

如果一个组件不是路由绑定组件，那么该组件的 props 中是没有路由相关对象的，虽然我们可以通过传参的方式传入，但是如果结构复杂，这样做会特别的繁琐。幸好，我们可以通过 withRouter 方法来注入路由对象。

2.3.7.2 example14

实现分页功能。

2.3.7.2.1 example14-1

分页框子。

react-Novice05\app\src\components\Pagination.js

import React from 'react';
import PropTypes from 'prop-types';

import {Link, withRouter} from 'react-router-dom';

class Pagination extends React.Component {

    static defaultProps = {
        pages: 1, // 总页数
        page: 1 // 当前页
    }

    // 属性验证
    static propTypes = {
        pages: PropTypes.number,
        page: PropTypes.number
    }

    render() {
        let {pages, page} = this.props;

        return (
            // 根据当前页，渲染a标签
            <div className="pagination">
                {
                    (new Array(pages)).fill('').map((v, i) => {
                        return (
                            <Link
                                key={++i}
                                // 高亮当前页
                                className={i === page ? 'active' : ''}
                                to={'/'+i}
                            >
                                {i}
                            </Link>
                        );
                    })
                }
                前往
                <input type="text" className="goto" onKeyDown={e=>{

                }} />
                页
            </div>
        );
    }

}
export default Pagination;

react-Novice05\app\src\App.js

import React from 'react';

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

import './css.css';

import Home from './views/Home';
import About from './views/About';
import View from "./views/View";
import NotFound from "./views/NotFound";
import Cart from "./views/Cart";
import Redirect from "react-router-dom/es/Redirect";
import Login from "./views/Login";
import Pagination from "./components/Pagination";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            // 用户信息
            userInfo: {
                id: 1,
                username: ''
            },

            items: [
                {
                    id: 1,
                    name: 'iPhone XR',
                    price: 542500
                },
                {
                    id: 2,
                    name: 'Apple iPad Air 3',
                    price: 377700
                },
                {
                    id: 3,
                    name: 'Macbook Pro 15.4',
                    price: 1949900
                },
                {
                    id: 4,
                    name: 'Apple iMac',
                    price: 1629900
                },
                {
                    id: 5,
                    name: 'Apple Magic Mouse',
                    price: 72900
                },
                {
                    id: 6,
                    name: 'Apple Watch Series 4',
                    price: 599900
                }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <h1>React路由</h1>
                <hr/>

                <nav>
                    <NavLink to="/" exact={true} activeStyle={{color: 'red'}} isActive={(match, location) => {
                        // match当前匹配的 location 当前地址栏信息
                        // console.log(match, location);
                        // match 为真后面无需处理 否则以'/view'命名开始
                        return match || location.pathname.startsWith('/view');
                    }}>首页</NavLink>
                    <span> | </span>
                    <NavLink to="/cart" activeStyle={{color:'red'}} exact>购物车</NavLink>
                    <span> | </span>
                    <NavLink to="/about" activeStyle={{color: 'red'}}>关于我们</NavLink>
                </nav>
                <hr/>
                <Switch>
                    <Route path="/" exact render={(props) => <Home items={this.state.items} {...props} />} />
                    <Route path="/view/:id(\d+)" render={(props) => {
                        return <View {...props} items={this.state.items} />
                    }} />
                    <Route path="/cart" component={() => {
                        if (this.state.userInfo.id > 0) {
                            return <Cart />;
                        } else {
                            // 重定向组件
                            return <Redirect to='/login' />;
                        }
                    }}/>
                    <Route path="/login" activeStyle={{color:'red'}} exact component={Login}/>
                    <Route path="/about" component={About}/>
                    <Route component={NotFound} />
                </Switch>

                <hr/>
                <Pagination page={1} pages={10} />
            </div>
        )
    }

}

export default App;

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.14-1
Branch：branch4

commit description：v3.14-1-example14-1（应用场景（七）- 分页框子）

tag：v3.14-1

2.3.7.2.2 example14-2

把分页和排序均加进url中

如：localhost/page=2&sort=desc

上述的分页组件写错位置了，应该写在home组件中，否则关于我们的组件中下方也会分页了。

react-Novice05\app\src\views\Home.js

import React from 'react';

import Item from '../components/Item.js';
import qs from 'qs';
import Pagination from "../components/Pagination";

export default class Home extends React.Component {

    constructor(props) {
        super(props);

        // 默认降序，赋给state
        this.state = {
            items: this.doSort('desc')
        };

        this.sort = this.sort.bind(this);
    }

    sort(e) {
        // let items = this.doSort(e.target.value);
        // this.setState({
        //     items
        // });
        // 跳转页面
        let {history} = this.props;
        history.push(`/?sort=${e.target.value}`)
    }

    doSort(type = 'desc') {
        let {items} = this.props;

        return items.sort( (a, b) => {
            return 'desc' === type ? b.price - a.price : a.price - b.price;
        } );
    }

    render() {

        // 取默认排序好的items
        let {items} = this.state;
        let {location} = this.props;

        // let queryString = window.location.search.substring(1);
        let queryString = location.search.substring(1);
        // 作用：将queryString转为对象形式
        let qsTest = qs.parse(queryString, {ignoreQueryPrefix: true});
        let sort = qsTest.sort || 'desc';

        this.doSort(sort);
        let page = Number(qsTest.page) || 1;

        return (
            <div>
                <h2>商品列表</h2>

                <select defaultValue={sort} onChange={this.sort}>
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>

                <ul className="item-list">
                    <li className="head">
                        <span>名称</span>
                        <span>价格</span>
                    </li>
                    {
                        items.map( item => <Item item={item} key={item.id} /> )
                    }
                </ul>
                <hr/>

                <div>
                    <Pagination page={page} pages={10} />
                </div>
            </div>
        );
    }

}

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.14-2
Branch：branch4

commit description：v3.14-2-example14-2（应用场景（七）- 分页框子，应该放在Home中）

tag：v3.14-2

2.3.7.2.3 example14-3

完善分页的跳转某页的功能。

react-Novice05\app\src\components\Pagination.js

                {/*完善分页的跳转某页的功能*/}
                <input type="text" className="goto" onKeyDown={e=>{
                    if (e.target.value !== '' && e.keyCode == 13) {
                        // 跳转页面：刷新url
                        history.push('/?page=' + e.target.value);
                    }
                }} />

提示不能够读取push属性是undefined，说明其实目前history属性实际上是undefined，history在这里是有问题的。当前分页组件是嵌套在另一个页面组件中的，因此它是不存在路由对象的。

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.14-3
Branch：branch4

commit description：v3.14-3-example14-3（应用场景（七）- 完善分页的跳转某页的功能，但报错了）

tag：v3.14-3

2.3.7.2.4 example14-4

因为home组件是有路由对象的，把home组件的history传过去即可。

                <div>
                    <Pagination history={this.props.history} page={page} pages={10} />
 
                    {/*<Pagination page={page} pages={10} />*/}
                </div>

参考：https://github.com/6xiaoDi/blog-react-Novice/tree/v3.14-4
Branch：branch4

commit description：v3.14-4-example14-4（应用场景（七）- 完善分页的跳转某页的功能，解决报错问题）

tag：v3.14-4

但是这种做法是极不推荐的，假如后期修改，home组件中嵌套一个a组件，a组件再嵌套b组件，b再套分页组件，这样你需要一层层的传，逻辑会很繁琐。

这个时候我们可以依靠withRouter组件（高阶组件）来解决这个问题了。

2.3.7.2.5 example14-5

通过 withRouter 对 Pagination 进行包装，withRouter内部会把路由有关的几个对象注入到 Pagination 组件的 props 中，并返回 Pagination

高阶组件 - 高阶函数

react-Novice05\app\src\components\Pagination.js

import {Link, withRouter} from 'react-router-dom';
......
export default withRouter(Pagination);

react-Novice05\app\src\views\Home.js

                <div>
                    <Pagination page={page} pages={10} />
                </div>

https://github.com/6xiaoDi/blog-react-Novice/tree/v3.14-5
commit description：v3.14-5-example14-5（应用场景（七）- 完善分页的跳转某页的功能，完成）

tag：v3.14-5

我们可以在react官网搜索高阶组件（HOC）

高阶组件是参数为组件，返回值为新组件的函数。即传进去一个组件，就出来一个组件。

但是出来的新组件比起原组件，经过高阶函数，进行了扩容。

往下翻可看到源码：

// 此函数接收一个组件...
function withSubscription(WrappedComponent, selectData) {
  // ...并返回另一个组件...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
 
    componentDidMount() {
      // ...负责订阅相关的操作...
      DataSource.addChangeListener(this.handleChange);
    }
 
    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }
 
    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }
 
    render() {
      // ... 并使用新数据渲染被包装的组件!
      // 请注意，我们可能还会传递其他属性
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

主要看返回值，这里其实就相当于在内部引入了...this.props，就和我们自己最开始自己引入props一样。

react的基础就差不多了，剩下内容小迪以后再扩展。

（后续待补充）

溜_x_i_a_o_迪

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React 0基础学习路线（6）— 图解深度详述React路由及其详细案例（附详细案例代码解析过程）

文章目录1. 重点提炼2. React.js - 路由react-router-dom2.1 路由2.1.1 SPA2.1.2 SPA 的页面切换机制2.1.3 后端路由与前端路由2.1.3.1 后端路由2.1.3.2 前端路由2.1.3.2.1 URL Hash2.1.3.2.2 HTML5 History API2.1.4 React.js 中的路由2.2 React Router2.2.1 基于 Web 的 React Router2.2.1.1 安装2.2.1.2 概览2.3 基础2.3.1 应用场
复制链接

扫一扫

专栏目录