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

在app容器中，它调用一个检查登录的操作，然后调用router.history.push('/admin/dashboard')登录是否有效。 AppContainer组件的其余部分是

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

转到/ admin会正确地将您发送到/ admin / dashboard。转到/ admin / dashboard 404，似乎甚至不匹配第一条路径＆＃34; / admin＆＃34;。

我做了什么明显的错误？不应该通过第一条路线匹配/ admin / xxxxx吗？

Answer 1

了解404路由的位置以及是否有任何逻辑可以控制推送到/ / admin / dashboard会很有帮助。

只要没有'严格'或'确切'道具，

'/ admin / xxxxx'肯定会导致'/ admin'匹配。

潜在错误：如果AppContainer中的逻辑检查登录状态并执行推送到'/ admin / dashboard'而不管当前路径名，那么您的应用可能会落入下面的递归周期：

用户导航至'/ admin'
路径检查路径名'/ admin'对路径道具'/ admin'并找到匹配
路线渲染'应用'组件
AppContainer验证用户是否已登录
AppContainer将用户推送到'/ admin / dashboard'
应用程序重新呈现路径名为“/ admin / dashboard”
路径检查路径名'/ admin / dashboard'对路径道具'/ admin'并找到匹配
路线渲染App组件
AppContainer验证用户是否已登录
AppContainer将用户推送到'/ admin / dashboard'
应用程序重新呈现路径名为“/ admin / dashboard”
...

如果路径名为'/ 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>
        );
    }
}

React router v4路由设置

1 个答案: