react-day03（Router）

（1）路由介绍---根据url路由不同渲染不同组件

　　1、安装

npm install --save react-router-dom

　　安装完毕后，查看package.json项目说明文件，此时该开发依赖已经分配到生产依赖dependencies中

　　

　　审查后发现该版本为5版本系列，5版本主要针对React Hook做了更好的支持

　　2、作用

　　

 

 

 　　点击不同导航选项时会跳到不同的对应页面，而React主要编写单页面应用（SPA）：所有的页面跳转都是由路由操作，主要原理是根据路由不同去切换试图。

SPA页面跳转：
    所有的页面跳转都是由路由操作，主要原理是根据路由不同去切换试图

　　接下来优化下项目初始结构，删除无用文件（serviceWorker.js离线缓存。。。）

　　

 　　并修改入口文件

　　

 　　根组件App.js也做下简化

　　

 　　效果如下所示

　　

 　　但一个应用不可能只有一个页面，所以借着下面操作

　　

 　　之后编写相关组件并导出

　　   

 　　除了使用Class类的形式，使用function形式也可以创建组件，如下

　　

 　　接下来在根组件引入

　　

 　　接下来想要的效果是根据路径不同，显示不同的组件页面，类似于百度新闻

　　

 

 　　

 　　首先引入Router的一系列方法

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

　　分析：因为BrowserRouter单词过长，所以这里官方推荐我们用as重命名为Router；Router代表路由器，而Route代表线路；Link用于跳转

　　接下来结合Route便可以实现路由渲染，如下所示

　　

 　　测试如下

　　    

 　　至此便可以实现根据不同的url路由渲染不同组件。

 

 

（2）BrowserRouter与HashRouter区别

　　

 

　　

　　接下来我们看下两者区别

　　1、BrowserRouter

　　　　

 

 

 　　　　表现形式如下

　　　　 

 

 

 　　2、HashRouter

　　　　

 

 

 　　　　表现形式如下

　　　　 

 

 

 　　3、区别

HashRouter表现为锚点链接
BrowserRouter没有锚点形式，以斜杠开头，但不能以斜杠结尾。是H5 新特性，主要通过history.push实现。上线之后，需要配合后台进行相关处理（重定向处理404的BUG）

　　　　由于此技术仅旨在支持旧版浏览器，因此我们建议配置服务器以供使用<BrowserHistory>。

 

（3）Router之Link跳转

　　

 

 

 　　

 　　 本质会被解释为a标签

 　　此时便可以点击导航进行页面展示内容的切换。

　　接下来将Link换为a链接做下测试

　　

 　　此时仍旧可以实现页面切换跳转。但两者仍存在较大差异，直接用a链接虽然可以跳转，但违背了SPA的初衷，每次跳转都会重新加载相同信息。

　　正常开发，一般会将该导航组件单独分隔出去，所以借着处理如下

　　

 　　

　　

 

　　

 

 

（4）Router之exact匹配规则---精准匹配

　　需求：访问链接为http://localhost:5000/mine/info时，页面展示info信息组件

　　

 

 

 　　

 　　此时做下测试

　　

 

 

 　　会发现，除了展示Info组件，Mine组件也展示了出来。此时便可以利用exact精准匹配

 <Route path="/mine" exact={true} component={Mine}></Route>

　　默认exact为true，所以，也可以不写赋值。借着做修改，一般访问首页都不带home，所以修改如下

　　

 

 

 　　

 

 

 　　测试如下，会发现每个页面都会将Home组件渲染出来

　　

 

　　修改如下，利用exact进行精准匹配，即可解决该问题

　　

 

 

 

 

（5）Router之strict严格匹配

　　虽然之前的exact可以进行精准匹配，但某些情况下还不够

场景：有时，我们访问网站时习惯在最后加个/，但开发者并不希望匹配到它。因为有时最后的/可能表示另外一个路径，此时可以通过strict来处理

　　

 

　　接下来添加严格匹配属性，处理后的结果如下所示

 

　　

 

 

 　　

 

　　另外，还有一点要注意，exact精准匹配存在的组件想要添加严格匹配strict时，两者同时存在，不然会无效。

 

 　　

 

 

 

 

（6）Router之404页面和Switch

　　当用户访问的url不存在时，做出对应404页面反馈

　　

　　编写如下

　　

　　

 

 

 　　之后进行导入使用

　　

 

 

 　　因为是全规则匹配，所以不用添加path，此时测试如下

　　

 　　但此时会发现，每个页面都会渲染404组件

　　

 　　此时便可以利用Switch进行限制，在Switch下只能显示一个组件

　　

 

 

 　　

 

（7）Router之render function简约加载方案------加载组件的另一种方式

　　之前的每个视图都对应一个组件，但有时也可以使用简约方案，来代替简单的组件

　　

 　　

 　　除了直接render里写标签内容外，还可以直接调用组件。即将标签内容直接替换为组件调用

　　

 　　而且这种方式也可以传递参数，如下所示

　　

 　　

　　结果如下

　　

 　　这些信息在以后操作会有相关作用。当然，也可以传递其他基本类型数据，如下所示

　　

 　　

 

 

 　　

　　此外也可以利用解构赋值格式，如下

　　

以上便是极简形式的渲染方法，可以不用component属性，利用render进行直接渲染，也可以手动传递参数
参数传递与路径展示：且该参数没有在路径上进行相关展示，之后会介绍其他参数传递，可以在路径上进行展示

 

 

（8）Router之NavLink激活导航高亮

　　

 

 

 　　

 

 

 　　如上所示，在不同页面时，导航会有对应的高亮展示，这时便需要用到<NavLink></NavLink>

　　

 

　　接下来对代码做下修改，将所有的Link换为NavLink

　　

 

 

 　　接下来坐下测试，此时仍然可以正常切换

　　

 

 

 　　此时会发现，被选中的导航，会添加className为active，所以接下来可以给该类名添加样式

　　

　　然后在Nav.jsx组件引入

　　

　　测试如下

　　 

　　会发现，在other下除了other对于导航，home首页也被高亮。

原因：
    /other包裹在/首页下，所以需要添加exact精准匹配

　　

 　　除了默认的active，也可以自定义激活状态的类名，使用属性activeClassName即可

　　

　　

　　

 　　接着，编写navSelected样式即可

　　此外也可以使用内联样式style进行状态编写，如下所示

　　

 　　如果activeStyle要直接写到标签里，则需要使用{{}}才可以，如下所示

　　

　　

 

（9）Router之url parameters---路由传参（单个或多个）---参数传递形式1---parameters参数形式

 　　对于某些页面来说，渲染时传递的参数不同，会导致渲染不同内容。这时便需要通过路由传参进行处理了。这里我们用/mine/info来举例

　　

 　　传递参数时以/开头

<Route path="/mine/info/:id" component={Info}></Route>

　　此时跳转的组件里，便可以通过props进行接收。在info组件输出测试下

　　

　　

　　此时便可以通过props.match.params.id来获取传递的id参数

　　

 　　

 　　此时便可以根据传参的不同，获取到不同的网络数据

　　但此时仍然存在，问题，如果不传递参数，会出现404错误，如下所示

　　

 　　此时可以加个参数？，表示传参可有可无，如果不传参数，则默认无即可

<Route path="/mine/info/:id?" component={Info}></Route>

　　

 　　此外，也可以传递多个参数，如下所示

<Route path="/mine/info/:id?/:name?/:age?" component={Info}></Route>

　　

 　　

 　　真正开发时，不可能让用户手动传递，一般都是点击跳转时传递，如下所示

　　

　　

<NavLink></NavLink>导航处传递，<Route path="/mine/info/:id?/:name?/:age?" component={Info}></Route>处接受渲染。

　　

 

（10）Router之url query string---路由传参（单个或多个）---参数传递形式2---query问号形式

　　除了上述参数传递形式，还有另外一种形式

　　如果是query问号形式，则可以通过location.search来获取，如下所示

　　

 

 　　所以接下来有两种读取方案

　　1、读取方案一：new URLSearchParams(props.location.href).get(name)

　　

 

 　　

 

 　　接着使用get方法传入对应参数名获取对应值，如下所示

　　

 

 　　此外还有第二种读取方案，较为简单

　　2、读取方案二：引入querystring依赖包，然后调用该依赖包的相关方法

　　

 

 　　测试结果如下

　　

 

 　　但此时对象前面有个？，如果不去掉则会影响id的读取，所以接着操作如下（转为字符串后，利用正则匹配将其替换）

JSON.stringify(queryParamsObject).replace(/\?/g,"")

　　

 

 　　

 

 

 

（11）Router之to=object（该属性在Link和NavLink的表现一致）+ 隐藏属性state

　　

 

 　　这里我们拿mine组件导航来举例

　　

　　接下来在Mine组件做下输出测试

　　

 　　此时点击导航如下所示

　　

 

 　　分析：此时可以读取到路由设置传参对象里的相关配置，例如通过hash做一些判断等等。。。 此外，还有一个隐藏属性state，不会表现在url里，但是隐性的传递了过来

　　

 

 　　

 

 　　此外，该隐藏属性可以自定义

　　

　　

state隐性属性优点：可以隐藏传递参数

 

 

（12）Router重定向之redirect

　　1、基础形式，基本用法

　　

 

　　此时访问/hello时重定向到/，访问/hellomine时重定向到/mine

表现形式为直接在url进行拦截重定向，此外还有另外一种形式，即跳到新页面后再重定向到其他页面

 　　2、跳转新页面后再进行重定向

　　场景：选择商品或外卖进行下单时，如果没有登录，则会重定向跳转到登录页面

　　首先编写商品页面组件，如下所示

　　

　　

 

 　　测试如下

　　

 

 　　接下来做个功能，进入该商品页面后重定向到首页。所以首先需要判断登录状态

　　

 

 　　如果isLogin为true则是已经登录，直接展示该页面的相关信息，否则利用Redirect重定向到首页

这里便可以通过重定向Redirect实现权限功能

 

　　

 

（13）Router重定向之push和replace

　　在mine我的页面点击按钮，重定向到首页

　　　　注意：这里我们用的其他方式编写方法，详情见React.Component三种手动绑定this方法，React创建组件的3种写法 ，React.createClass与React.Component区别.

 　　　  這裡，我們輸出下props

 　　　　

 　　　　

 　　　　除了上述写法，也可以直接通过this.props操作

　　　　

 　　　　所以可以根据push和replace方法操作进行自定义编码重定向，如下所示

　　　　

两者区别：
    1、push为叠加型，上次访问的页面依然存在内存里，可以通过返回键返回上一页
    2、replace为替换型，直接替换掉上个页面，无法返回

 　　　　场景：登录成功后，在接下来利用编码跳转到某个页面

 

（14）Router之withRouter高阶组件

　　 有时，如果导航操作，没有放置在Router对象下，则组件不会被路由管理，所以没有路由对象。此时如果想在该组件操作路由，需要结合withRouter高阶组件实现

　　首先编写MineChild组件，作为Mine组件的子组件，然后在Mine组件里调用，如下所示

　　

 　　之后在Mine组件里引用

　　

 

 

 　　

 

 

 　　此时输出空对象，即props为空对象。

原因：
　　该组件没有放置在Router对象下，则组件不会被路由管理，所以没有路由对象。此时如果想在该组件操作路由，需要结合withRouter高阶组件实现。如下所示

　　

　　此时this.props输出如下

　　

　　接下来便可以进行路由操作了，如下所示

　　

 

 　　

 

 

 　　

（15）Router之prompt---离开确定组件

　　场景：当前页面有输入框，且里面输入了一些内容，在离开该页面组件时，可能需要提示用户。即类似于钩子函数，在进行路由跳转前进行的一些操作

　　首先编写组件输入框代码，如下所示

　　

 

 　　

此时输入内容后，离开该页面组件时没有任何提示。所以接下来给其添加提示操作。这里便用到了Prompt

 　　

这里使用了正则表达式/^s*$/匹配空行，此时离开页面，进行路由跳转时，会进行输入监听，如下所示

　　

 

 

 

（16）Router之路由嵌套

　　新建书籍组件BookList，在其下进行路由嵌套

　　

 

 　　

 

 　　之后在入口文件，进行路由嵌套，如下所示

　　

　　最终效果如下

　　

 

 　　

 

 

　　

 

 

 

 

.