欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > react框架-路由的嵌套以及参数传递与编程化

react框架-路由的嵌套以及参数传递与编程化

2025/6/18 18:25:02 来源:https://blog.csdn.net/A6516565189/article/details/148722479  浏览:    关键词:react框架-路由的嵌套以及参数传递与编程化

1.嵌套路由

        

        

        这里我们希望在Home路径展示区里面嵌套一个新的导航区,以及对应的展示区。

        

        这里我们的News路由组件和Message路由组件作为Home路由组件的子组件。这样形成嵌套路由。

        怎么实现呢?

        

        这是我们第一层导航栏中的路由,有about,home以及如果当前没有显示的路由,就显示about路径下的路由。

        

        因为Message以及News路由组件是Home路由组件的子组件,我们直接在Home文件夹下存放,然后我们给Home组件的展示区添加路由链接,但是这时候我们是看不到的,因为/news找不到,因为路由的匹配是逐层匹配,去先注册的路由里面找,但是是找不到news的所有自动重定向到了about组件。也就是说第一层有了才能去第二层寻找。

        

            所以这种可以先匹配到home再去匹配news或者message路径,这样可以正常的改变路径了。每一次注册路由必须从前往后全程走一遍。只有第一层找到了才会去下一层路由寻找。这里是多个路由链接,注册自然是多个路由。这个前后顺序是按照路由的注册顺序来的

        

        swtich优化匹配过程,但是我们嵌套路由是不可以使用严格模式的,因为这样会导致无法匹配,因为/home/news在严格模式是匹配不到的。这样我们就实现了路由的嵌套。

2.向路由组件传递params参数

        我们嵌套了路由之后,我们Message路由组件再来一个导航区和展示区。

        

        这是我们想要实现的效果,其中id和title我们希望是我们传过去的,也就是使用路由组件的时候,传递参数让其展示区可以动态展示。

        

        我们在Message文件夹搞一个Detail文件夹作为第三层路由组件,也是子组件,我们在定义detail路径链接的时候把参数通过params传递过去。

        

        我们遍历我们提前写的数组对象,然后用params参数传递数据,格式是路由后面跟参数,用${state}这样的方式传递,但是用这种方式在注册路由的时候声明接收的是params参数,用的:id告诉组件Detail参数名字是id,然后我们就可以在Detail组件里面用解构赋值拿到this.props.match.params,为什么是在match对象里,通过输出this.props可以看到。这样就拿到了id和title,通过id找到我们在Detail组件定义的数组数据中id一样的content展示,我们就实现了这个过程。

        

        

        这样我们就实现了params参数这种方式传递参数

3.向路由组件传递search参数

        其实传递参数的原理是一样的,只是写法以及接收的方式不同,还有就是传search参数不需要声明。

        

        

        这样我们就注册好并且传参给了Detail组件。我们在控制台查看传到了props的那个地方。

        

        我们发现确实给到了search,但是?key=value&key=value这种字符串,不是对象,那我们就没办法通过{}展示了,我们需要变为对象格式的。

        

        我们把对象变为这种key=value字符串的写法叫做urlencoded编码,我们反过来需要用qs库里面的qs方法里的parse api。

        

        我们就可以把key=value转化为对象,但是我们还有一个?slice(1)是去掉我们keyvalue之前的?,不然会变成?Id=001这种。我们写一下,

const {id,title} = qs.parse(search.slice(1))

        这样拿到了展示就可以了。

   4.向路由组件传递state参数

        

        这种是通过对象的形式,也是非常简单易懂,参数之间通过state对象传过去,而且不需要声明参数,直接接收。

        

        解构赋值获取id title就可以直接展示了。但是这里有个问题地址栏没有数据,说明我们把state参数存到了history历史记录中,如果我们清除浏览器的缓存,就会丢失state参数(刷新不会丢失)。因为当我们使用路由组件的时候,默认传的参数里面的state是undefined。这里我们清除缓存就会变成undefined。

        

        我们可以用空数组来展示当丢失缓存之后,保证不会报错。

5.Push和replace

        我们定义的路由链接是默认push一个路径到历史记录中。

        

        历史记录大概是这样的栈结构,每次点击路由链接都会push一个新的路径作为栈顶来展示,我们可以在定义路由链接的时候加上replace。

        

        这样我们点击链接跳转路径的时候就不是push一个新的,而是直接把当前栈顶的替换掉了,也就是我们后退直接到了news而不是message,因为message被替换掉了。

6.编程式路由导航

        现在我们的嵌套路由在跳转链接的时候都是通过点击这个链接,这并不能满足我们的需求,我们往往需要去点击图片,或者按钮等各种方式去跳转路由展示不同的功能。

        

        这里我们添加按钮点击事件来操作路由的改变。给消息一这个路由链接添加两个按钮,第一个push查看,第二个replace查看。

        

        这是按钮的点击事件,这其实是调用了history的api来完成的,当我们调用api的时候,只需要输入(path,state)也就是填写路径和参数,就自动帮我们跳转到了路由并且传递参数展示我们想要展示的内容,完美的替代了链接。

        

        或者这种按钮点击事件回退或者前进,也是通过history的api以及history栈结构实现的,通过操作路由的前进后退来展示不同的内容。

        

        go这个api的参数是正负值,决定回退还是前进,总之编码式路由导航就是不止是单纯的link或者navlink链接点击跳转路由,根据我们的需要来自由控制跳转路由的方式。

        

        

        

        

        

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词