5.0.1版本的react-router-dom路由传参以及路由表的配置和接收页面的接受

  1   //  第一种  通过问号传参 
  2   //  发送 
  3   this .props.history.push("/detail?>item.downurl)
  4   //  路由表配置 
  5  <Route path="/detail" component={Detail} exact></Route>
  6   //  接收  可以获取到？后面的方法 
  7   this  .props.location.search 
   8   无弊端 刷新参数也有
   9  
 10  
 11   //  第二种 通过/传参  也就是动态路由！！！ 
 12   //  发送 
 13   this .props.history.push("/detail/"+8 )
  14   //  路由表配置 
 15  <Route path="/detail/:id" component={Detail} exact></Route>
 16   //  接收 可以获取到关于id的一个对象 
 17   this  .props.match.params 
  18   无弊端 刷新参数也有
  19  
 20   //  第三种通过对象发送跳转路由 
 21   this .props.history.push("/detail",{downurl:999 });
  22   //  路由表配置 
 23  <Route path="/detail" component={Detail} exact></Route>
 24   //  接收  可以获取到一个关于downurl的对象 
 25   this  .props.location.state
  26   弊端！！！ 
  27   通过HashRouter设置的路由可以跳转但是访问不到参数！！！
  28  
 29  
 30   //  通过标签跳转加传参 
 31   第一种单纯的跳转不传参
  32  <Link to="/main/list"><Link>
 33  
 34   第二种传参数跳转
  35  <Link to= {{
  36              pathname:"/detail" ,
  37              search:"?id=1",   //  获取this.props.location.search  
 38              state:{fromDashboard:11} //  获取this.props.location.state  
 39              }}> 跳起来啊啊啊啊
  40    </Link>
 41              
 42     //  路由表配置 
 43  <Route path="/detail" component={Detail} exact></Route>

 

　　　　　 不足知足欢迎补充喽~~~

查看更多关于5.0.1版本的react-router-dom路由传参以及路由表的配置和接收页面的接受的详细内容...