react-router嵌套子路由404问题

一级路由

<HashRouter>
  <Switch>
    <Route path="/login" component={LoginUser}  exact/>
    <Route path="/404" component={NoMatch} exact/>
    <Route path="/555" component={NoPermission} exact/>
    <Route path="/" component={DefaultLayout} />
    <Redirect from="*" to="/404" />
  </Switch>
</HashRouter>

DefaultLayout.js

<Switch>
  <Route path={this.props.match.url} component={Home} exact />
  <Route 
    path={this.props.match.url + 'about'}
    component={About}
  />
  <Route 
    path={this.props.match.url + 'article'}
    component={Article}
  />
  <Redirect from="*" to={{pathname:'/404'}}/>
</Switch>

Article.js里面有嵌套子路由

<Route path='/article/tab1' component={MyList}></Route>
<Route path='/article/tab2' component={MyForm}></Route>
<Redirect from="*" to="/404"></Redirect>
 init = async () => {
    let res = await this.http(this.url.pageForm,{});
    if(res.success){
        let list = res.dataList;//默认跳list[0]
      //this.props.history.push('/article/tab1')//路由跳转,类似这种
    }
  }

想实现的是,二级子路由不匹配跳到404去
因为Article里面路由是动态的,所以DefaultLayout进Article的时候只能是'/article',后面的子路由要ajax获取默认第一个,但是article刚进来就会跳到404,
而且404后,有ajax回调的路由跳转页面会在404那里卡住,出不来
两个问题,1.404问题,2.类似这种ajax回调跳转,应该怎么弄

阅读 6.1k
1 个回答

已解决

<Route path="/article" render={() => <div>测试Route</div>} exact strict></Route>
<Route path='/article/tab1' component={MyList}></Route>
<Route path='/article/tab2' component={MyForm}></Route>
<Redirect from="*" to="/404"></Redirect>

加一个过渡的路由,顺便可以实现loading效果

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题