一、问题介绍
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 作为路由组件就好了