情景如下:
我需要在http://localhost:3000/product下写一个跳转btn,跳转到addUpdate,所以我用了this.props.history.push()方法,但是当时对react中路由用法有点遗忘,所以写成了this.props.history.push(’/addUpdate’),结果发现,页面没有跳转,而且也没有跳转到product的重定向至/product页面
<Switch>
<Route path='/product' component={ProductHome} exact/>{/* 路径完全匹配*/}
<Route path='/product/addupdate' component={ProductAddUpdate}/>
<Route path='/product/detail' component={ProductDetail}/>
<Redirect to='/product'/> //我以为错了会跳转到这里
</Switch>
但是却跳转到最起始页面/home,所以是触发了最初的Redirect,如下:
<Switch>
<Route path='/home' component={Home} />
<Route path='/category' component={Category} />
<Route path='/product' component={Product} />
<Route path='/role' component={Role} />
<Route path='/user' component={User} />
<Route path='/charts/bar' component={Bar} />
<Route path='/charts/line' component={Line} />
<Route path='/charts/pie' component={Pie} />
<Redirect to='/home' />
</Switch>
后来复习了一下,这种路由的写法,要从最开始写,它会逐层匹配下去,如果在某一层匹配不上,就看那层有没有Redirect的操作,例如:
1、 /home —先注册
2、 /product ----等级跟home并列,后注册
3、 /product/addUpdate
以上写的两段重定向,
第一层是匹配是home还是product那一层的,如果写的是http://localhost:3000/+xxx,xxx并不是事先写好的route的话,会跳转到home;
第二层匹配的是在product组件里,在product前提下,所以如果写的是http://localhost:3000/product/+xxx,xxx并不是事先写好的route的话,会跳转到product;
错误原因
我现在在第二层添加第三层的跳转路由,必须写全,但是我只写了/addUpdate,所以会在第一层匹配/addUpdate,却发现没有这个选项,只有/home,所以触发第一层的重定向到/home,我如果关掉第一层的重定向,那么会跳转到http://localhost:3000/addUpdate这个页面,也不是我想要的http://localhost:3000/product/addUpdate
我如果想错误的跳转到product,也应该错写成/product/xxx