1. Introduction to the problem
1.1. As we all know, react can pass parameters to routes, such as:
{
/* 向路由组件传递 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>
However, parameters are passed through the Link corresponding to the route. But what if I don’t have a Link tag? for example:
<Routes>
<Route path='/changeMyAddress' Component={
ChangeMyAddress} />
<Route path='/changeAvatar' Component={
ChangeAvatar} />
<Route path='/changeNickname' Component={
ChangeNickname} />
<Route path='/' Component={
InfoBars}/>
</Routes>
I want the InfoBars component to be displayed by default when the page is opened, and I also need to pass parameters to it. What should I do?
2. Problem solving
1. The method I think of is to create a middleware. For example:
we create a middleware ChangeMiddleware component, define data in it, and pass it to the InfoBars component.
We can use ChangeMiddleware as a routing component.