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 会将您正确发送到 /admin/dashboard。 转到/admin/dashboard 404，貌似连第一个路由路径“/admin”都不匹配。

我做错什么了吗？去/admin/xxxxx不应该被第一个路由匹配吗？

Answer 1

了解您的 404 路由在哪里以及是否有任何逻辑控制向 '/admin/dashboard 的推送会有所帮助。

'/admin/xxxxx' 肯定会匹配 '/admin'，只要没有 'strict' 或 'exact' 属性。

潜在错误：如果 AppContainer 中的逻辑检查登录状态并执行推送到“/admin/dashboard”而不考虑当前路径名，那么您的应用可能会陷入以下递归循环：

1. 用户导航到“/admin”
2. Route 检查路径名“/admin”与路径属性“/admin”并找到匹配项
3. Route 渲染“App”组件
4. AppContainer 验证用户是否已登录
5. AppContainer 将用户推送到“/admin/dashboard”
6. 使用路径名“/admin/dashboard”重新呈现应用程序
7. Route 检查路径名“/admin/dashboard”与路径属性“/admin”并找到匹配项
8. Route 渲染 App 组件
9. AppContainer 验证用户是否已登录
10. AppContainer 将用户推送到“/admin/dashboard”
11. 使用路径名“/admin/dashboard”重新呈现应用程序
12. ...

最简单的解决方法是仅在路径名为“/admin”时推送到“/admin/dashboard”。

可以说认知开销较小的修复方法是删除手动 history.push 到 '/admin/dashboard' 并将 App 更改为以下内容：

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>
        );
    }
}