React路由器V4路由设置

Question

在从v2到v4的迁移期间，我的路线现在像这样设置了：

ReactDOM.render(
<Provider store={store}>
    <Router>
        <Route path='/admin' component={App} />
    </Router>
</Provider>
, document.getElementById('root'))

应用程序组件为

class App extends Component {
  render() {
    return (
      <AppContainer>
        <Switch>
          <Route path="/admin/dashboard" component={Dashboard} />
          <Route path="/admin/signin" component={SignIn} />
          <Route path="/admin/settings" component={Settings} />
        </Switch>
      </AppContainer>
    );
  }
}

在应用程序容器中，它调用一个操作，该操作检查登录名，然后 router.history.push('/admin/dashboard')如果登录有效。其余的AppContainer组件是

render() {
    return (
        <div>
          {this.props.children}
          <Detached />
        </div>
    )
  }

正确地将您发送到/admin/dashboard。转到/admin/dashboard 404，似乎甚至不匹配第一个路线路径"/admin"。

我在做什么公然做错了吗？不应该通过第一个路线匹配/admin/xxxxx吗？

Answer 1

知道您的404路线在哪里以及是否有任何逻辑来控制'/admin/dashboard。p>'/admin/xxxxx'一定要导致"/admin"的匹配，只要没有"严格"或"确切" prop。

潜在错误：如果AppContainer中的逻辑检查登录状态并执行推送到"/admin/dashboard"，无论当前路径名如何

1. 用户导航到'/admin'
2. 路由检查路径prop'/admin'的路径名'/admin'并找到匹配
3. 路由渲染'应用程序'组件
4. AppContainer验证用户已登录
5. AppContainer将用户推到"/admin/dashboard"
6. 使用PathName'/admin/dashboard'
的应用程序rerenders
7. 路由检查路径名'/admin/dashboard'对路径prop'/admin'，并找到匹配项
8. 路由渲染应用程序组件
9. AppContainer验证用户已登录
10. AppContainer将用户推到"/admin/dashboard"
11. 使用PathName'/admin/dashboard'
的应用程序rerenders
12. ...

如果路径名为'/admin'。

可以说，可以说较少认知开销的修复程序是删除手册历史记录。

class App extends Component {
    render() {
        return (
            <AppContainer>
                <Switch>
                    <Route exact path="/admin" render={() => <Redirect to='/admin/dashboard' />} />
                    <Route path="/admin/dashboard" component={Dashboard} />
                    <Route path="/admin/signin" component={SignIn} />
                    <Route path="/admin/settings" component={Settings} />
                </Switch>
            </AppContainer>
        );
    }
}