react-router嵌套子路由404问题

Question

一级路由

<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回调跳转，应该怎么弄

Answer 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效果