JAVA高级面试进阶训练营视频教程

admin

react-router：是react router的核心库

react-router-dom：是网页路由的解决方案，依赖于react-router

react-router-native：是react-native解决移动端路由的解决方案，依赖于react-router

下面讲述的是react-router-dom的使用

这里用的react-router版本是5.x

react-router5.x版本和react-router3.x使用上有很大不同

1安装路由模块

npm i –S react-router-dom

2路由的定义

App.jsx

这里定义了4个页面

<Router>定义一个路由实例，相当于一个路由容器

<Switch>标签让路由只能匹配单个<Route>，不具包含性的匹配多个路由

5.x的路由具有包含性和3.x的路由完全不同

exact属性让route进行严格匹配，只有路径完全一致才会匹配成功，默认值true，可以省略不写

eq：

      在网页中匹配根路径’/’,路由匹配会按从上到下的顺序进行匹配，如果没有<Swith>标签，就会成功匹配’/’,’/about’,’/inbox’,’/coder’所有的<Route>标签，从而展示其相关的组件。

添加<Swith>标签后，路由只能匹配单个<Route>标签，因此这里只会匹配到path=’/’的<Route>标签

但如果在网页中匹配’/about’,这时还是会匹配到path=’/’的路由，因此需要给path=’/’的<Route>标签添加exact属性让其进行严格匹配，只有路径完全等于’/’时才会成功匹配，添加exact属性后路由就不会匹配到path=’/‘的路由上，而是匹配到path=’about’的路由

3.将路由渲染到页面

index.js

下面叙述相关的详细的组件

目录结构：

Dashboard.jsx  网页根组件

这里有个公共组件Header

Header.jsx

<Link>标签用来进行路由跳转，默认会被渲染成a标签

About.jsx

Inbox.jsx

这里面嵌套了两个子路由，对应的组件分别是MessageLinkComponent和Message

其中一个是动态路由，以id值作为动态路径

获取父级路由的路径path：this.props.match.path，这里获取到的path是 ‘/inbox’

与this.props.match.url比较：

this.props.match.path获取的是纯路径，即定义好的路径  ‘/index/:id’

this.props.match.url获取的是资源的路径地址  ‘/index/123’

子路由组件：MessageLinkComponent.jsx

实现子路由的跳转，并把id值当成动态路径传出

子路由组件：Message.jsx

子路由跳转的内容显示

id值的获取：this.props.match.params.id

Coder.jsx

定义了一个子路由，其对应的组件是CoderContent

并且定义了子路由跳转的Link，实现子路由跳转，将相关数据以键值对存放于路径中并传递出去

CoderContent.jsx

通过get传值传递来的键值对用node的url模块进行解析，解析出一个以json对象保存的query对象，并将其展示在页面上

url.parse(this.props.location.search,true).query

路由模块的抽离

将路由的定义抽离成一个配置文件routesConfig.js

routesConfig.js

相关页面也需要改写

App.jsx

这里用三元表达式代替了if-else语句的嵌套

注意：子路由的嵌套要将component属性改写成一个render函数，这样才能将children子路由对象传递给props参数

render函数是一个带props参数的箭头函数，结果返回一个react组件实例对象（jsx对象）

并把children子路由挂载在实例对象的children属性上，相当于覆盖了props.children属性。

 

从这里可以看出<Route>标签的作用仅仅只是充当了一个中间组件，最后还是需要通过render

函数来渲染相关的即将展示的组件，并通过props参数把挂在<Route>标签上的属性传给组件实例

例如：<Route>上的path属性最终会以this.props.match.path的形式在react组件实例中获取到

 

Inbox.jsx

Coder.jsx

js实现路由跳转

网上有很多种方法实现，这里使用比较简单的两种方法

1.官方推荐的组件内路由跳转

官方推荐使用高级路由组件withRouter来包裹需要用到跳转的组件。

这里对组件Header.jsx进行修改

被withRouter包裹的Header会给props注册一个history对象，这个history对象正是整个路由默认使用的history对象（创建BrowserRouter组件后会有一个默认的history，但不会直接暴露出来给你使用）

history对象内容：

可以通过event.target获取dom对象，进而通过js操作dom获取元素属性to的值，即获取跳转路径，并通过this.props.push()来进行跳转

eq： this.props.history.push(e.target.getAttribute('to'))

也可以通过event.target.dataset.to来获取路径值，不过进行跳转的标签上要有定义data-to属性来保存路径

eq： this.props.history.push(e.target.dataset.to)

2.自己创建一个history对象实例来控制跳转 （比较自由）

创建history模块

history.js

这里用了react的history库来创建，并将实例导出。

注意将history对象引入到Router组件中，让整个路由实例使用我们创建出来的history对象，否则无法生效

App.jsx

导入后发出警告：

原来BrowserRouter忽略了history属性，因此通过BrowserRouter创建的路由也都不用手动导入history。

为了能使用自定义的history，只好不使用提供好的BrowserRouter组件来创建路由，而是用最原始的Router组件来创建路由实例。

===》

然后只需要在想要使用跳转的组件中导入我们创建好的history实例，并操作history对象就能实现跳转了

eq：

import history from ‘modules/history’

history.push(e.target.getAttribute('to'))

以Header.jsx为例：

实际上这里的this.props.history和导入的history已经是同一个对象了

实验：

console.log(history==this.props.history) //true

推导可以知道withRouter组件给Header注册的this.props.history属性，来自于App.jsx中导入的history => <Router history={history}> ，并且通过withRouter传递给其他组件

补充

由于Route组件进行的条件判断太过繁杂，于是将Switch组件和Route组件组合封装成一个Routes组件，避免页面数量多时，总要重复写这段判断代码

Routes.js

由于对Route组件外部包裹了Routes这样一个组件，导致某些组件在调用Routes时，没有把上一层的Route组件的属性传递下去，Route组件其实就是个中间组件并且包裹了个普通组件，并把Route上的属性传递给普通组件。

正常：Route.props –> Component.props

嵌套后： Route.props –> Component.props –>Route2.props –> Component2.props

Component.props –>Route2.props 这个阶段会用到 Component.props的部分值

包裹Routes后：Routes.props –> Route.props  –> Component.props 

因此进行路由嵌套后是这个样：

Routes.props –> Route.props  –> Component.props  -> Routes2.props –> Route2.props  –> Component2.props

这里得解决：Component.props  -> Routes2.props 这个阶段的传值，Routes2作用其实就是承接Component中的props，目的是为了能让Route2能正常工作

于是得进行手动传值：<Routes {...this.props}></Routes>

并且在Routes组件中增加了判断，判断接下来进行渲染的config用的是routesConfig还是由组件传递下来的children

this.props.children?(this.config=this.props.children):(this.config=routesConfig)

修改后的App.jsx变得极为简单：

Inbox.jsx也一样

同理作用于Coder.jsx