react中如何向没有Link的路由标签传递参数

一、问题介绍

1.1、总所周知啊,react是可以向路由传递参数的,比如:

 		{
    
    /* 向路由组件传递 Params参数 */}
         <Link to={
    
    `/home/message/detail/${
      
      msgObj.id}/${
      
      msgObj.title}`}>{
    
    msgObj.title}</Link> 

        {
    
    /* 向路由组件传递 search参数 */}
         <Link to={
    
    `/home/message/detail/?id=${
      
      msgObj.id}&title=${
      
      msgObj.title}`}>{
    
    msgObj.title}</Link> 

        {
    
    /* 向路由组件传递 state参数 地址栏不会显示传递的消息 */}
        <Link to={
    
    {
    
    pathname:'/home/message/detail',state:{
    
    id:msgObj.id,title:msgObj.title}}}>{
    
    msgObj.title}</Link>

但是啊,都是通过路由对应的Link来传递参数。可是我要是没有Link标签呢?比如:

<Routes>
          <Route path='/changeMyAddress' Component={
    
    ChangeMyAddress} />      
          <Route path='/changeAvatar' Component={
    
    ChangeAvatar} />
          <Route path='/changeNickname' Component={
    
    ChangeNickname} />
          
          <Route path='/'  Component={
    
    InfoBars}/>
  </Routes>

我想让页面打开时默认展示 InfoBars 组件,而且我还需要给他传递参数怎么办呢?

二、问题解决

1、我想到的方法是创建一个中间件,如:
在这里插入图片描述
我们创建一个中间件 ChangeMiddleware组件,在它里面定义数据,传递给 InfoBars组件
我们把 ChangeMiddleware 作为路由组件就好了

猜你喜欢

转载自blog.csdn.net/m0_63135041/article/details/130590073