React路由history的跳转需要逐级写全

情景如下:
我需要在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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值