我的一个React路由嵌套(多级路由),路由传参之旅

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的一个React路由嵌套(多级路由),路由传参之旅相关的知识,希望对你有一定的参考价值。

在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的。

我的react已经配置了redux(见我的redux之旅),所以这是在引入的插件里做的演示。

从App组件跳转到NewRoute组件(需要简单的路由跳转,点击自己预习)

 

(1)新建一个demo:

 

这里使用了render方式在一个文件中模拟了多个组件的效果 代码只为讲解使用在真实开发中尽量不要这样写代码的。

这段代码中,我们模拟了3层路由,路径和界面如下:

 

 

 

 

 

 

 

 代码提供给大家

复制代码
 1 import React, { Component } from \'react\'
 2 
 3 import{
 4     HashRouter as Router,//路由会带#号
 5     Route,
 6     NavLink
 7 } from "react-router-dom"
 8 
 9 export default class NewRoute extends Component {
10     render() {
11         return (
12             <div>
13                 <Router>
14                     <Route path="/" render={()=>{
15                         return(
16                             <div>
17                                 <p>这行显示的是"/"的组件</p>
18                                 <Route path="/a" render={()=>{
19                                     return(
20                                         <div>
21                                             <p>这样显示的是"/a"的组件</p>
22                                             <Route path="/a/b" render={()=>{
23                                                 return(<p>这行显示的是"/a/b"的组件</p>)
24                                             }}></Route>
25                                         </div>
26                                     )
27                                 }}></Route>
28                             </div>
29                         )
30                     }}></Route>
31                 </Router>
32             </div>
33         )
34     }
35 }
复制代码

 

 

(2)用子组件形式实现上面的demo:

效果如下:

 

 

 

 

 

 

如果你对现在的页面效果不满意,可以添加多个link,并且在Switch中添加多个路由,真实还原网站。

 

 (3)实际开发中:

App.js中代码:

 

indexPage.js中代码:

 

 

userPage.js中的代码: 

 

 这是一套基本的业务流程,不仅涉及到界面跳转,嵌套,还有网页不存在的重定向,它们之间是向下调用的关系 App.js中 path = / 会调用 indexPage.js indexPage.js path = /user 会调用 userPage.js userPage.js path = /user/one 会调用最终显示组件。

 

(4)我们打印一下shopPage的this,看看里面有什么:

想得到当前的路径,用this.props.match.url是个不错的选择

 

(5)多级路由中地址的拼接:

拼接的作用,可以随意切换组件间的调用,比如随时在/b之前再插入一层地址,也可以直接整个组件移动到其它路径之下。

我们现在在这里呢,复制了一份userPage界面,命名为userPage1,把他的路径命名为c,并把b组件引入了userPage和userPage1:

userPage组件:

userPage1组件:

 

 

 

此时此刻,在各自的路径下打开b组件的截图:

 

 

(6)我们的组件,有时候只是一个模板,需要接受传值,才能起到自己的作用,然后就说一下组件传值:

路由传值的常用方式:params(/)、hash(#)、search(?)、state

 

(7)params(/)

● 上面代码中是在定义路由组件中

● 注意path地址中斜杠后面 :id 

● 其中:冒号可以理解为即将声明一个变量

● 变量的名字是id

拓展内容,参数正则匹配

● /:id?后面?号表示可有可无

● /name_:id前面加name必须匹配/name_XXX

● /:id(\\d+)括号中的内容为正则,这里表示:id必须是数字才会匹配

取值需要在对应的component定义的组件 UserPage中使用 this.props.match.params.id 地址栏输入上图的地址(/id001)取到的结果就是 id001

 

 在此为我的粗心表示歉意,直到我最后用state传值菜发现,没有给大家讲Link,而是直接在浏览器的网址直接写了数据,然后让大家看的控制台,仅仅是取了一个数据,这次重新编辑给大家补上Link的代码,大家心里想象截图上有一个Link就好了,当然,没有link,直接在网址里加入数据是没错的,只不过心里膈应,怕大家看不懂。如果你要把这行代码补到 组件,记得外面包一层Router

<Link to={ \' /a/ \' + \' id001 \' }  activeClassName=\'active\'>点击跳转</Link>
复制代码
1 <Link to={
2 {
3 pathname:"/a",
4 hash:\'#name=zhang\',
5 query:{name: \'zhang\'},
6 state:{name:\'zhang\'}
7  }
8 }>点击跳转
9  </Link>
复制代码

再次给各位姥爷磕头!

 

(8)hash(#)

正常的path:

 

页面给到值:

此时的控制台打印this

 

● 在regPage.js页面中直接使用 this.props.location.hash 取值

● 打印结果是地址栏包括#号及后面所有的值 

● 该方式需要在对键值对进行处理相对比较麻烦

 

(9)search(?)

用法优缺点问题与上面的hash十分类似

正常的path:

界面:

 

控制台:

 

 

(10)state

代码是这样的:

 

 页面是这样的:

 

 控制台:

在regPage.js组件中通过 this.props.location.state取值

以上是关于我的一个React路由嵌套(多级路由),路由传参之旅的主要内容,如果未能解决你的问题,请参考以下文章

vue-router路由传参之query和params

路由的query传参

Vue嵌套(多级)路由

React 学习笔记总结

使用 CRUD 设置激活具有多级嵌套路由的路由器链接

React路由超详解...