javascript - 如何更改 react-router 路由？

Question

我正在尝试根据登录状态更改路线:

  renderRouter() {
    if (loggedIn) {
      return (
        <Router>
          <Route path="/" component={Dashboard} />
        </Router>
      );
    }

    return (
      <Router>
        <Route path="/" component={Login} />
      </Router>
    );
  }

但是当状态改变时我收到警告:Warning: [react-router] You cannot change <Router routes>; it will be ignored

是否可以使用新路由重新初始化 react-router？

我知道我可以使用 onEnter以确保用户可以访问此页面，但我需要根据登录状态在一条 route 使用不同的组件，并且不想在组件内部移动此类逻辑。

Answer 1

首先你创建两个 Router，我认为你不应该这样做。

尝试将你的路由包装在一个 Switch 组件中，它只在一个 Router 中，然后使用你的“main”的 render 属性 Route，如果条件为真，它将重定向你，使用 exact 属性来确保这个 Route 默认匹配，注意你的 "/dashboard" Route 在上面，所以 Switch 可以匹配它。

结果应该是这样的:

<Router>
  <Switch>
    <Route path="/dashboard" component={Dashboard} />
    <Route 
      path="/"
      exact
      render={() => {
        if (loggedIn) {
          return <Redirect to="/dashboard" />;
        }

        return <Login />;
      }}
    />
  </Switch>
</Router>

不要忘记导入组件。

希望对您有所帮助。