如何更改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来确保用户可以访问这个页面，但是我需要根据登录状态将不同的组件放在一个路由中，并且不想将这样的逻辑移动到组件内部。

Answer 1

首先，您创建了两个路由器，我认为您不应该这样做。

尝试将你的路由包装在一个只在一个Switch中的Router组件中，然后使用你的“主”render的Route道具，如果条件为真，它会重定向你，使用exact道具来确保默认情况下这个Route将匹配，注意你的"/dashboard"路由高于另一个，所以Switch可以匹配它。

结果应该是这样的：

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

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

别忘了导入组件。

希望这能帮上忙。

Answer 2

我已经尝试了几次来获得所需的行为，毕竟我决定改变一种安全端点管理的方法。我的端点上的组件是非常简单的场景，它们只是合成层和一些场景模块。所以我创建了一个场景包装器：

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Login from '../scenes/Login';

function Scene({ children, fallback, secure, auth }) {
  if (secure === auth) {
    return children;
  }
  return React.createElement(fallback);
}

Scene.propTypes = {
  children: PropTypes.node.isRequired,
  auth: PropTypes.bool,
  fallback: PropTypes.func,
  secure: PropTypes.bool,
};

Scene.defaultProps = {
  auth: false,
  fallback: Login,
  secure: false,
};

const mapStateToProps = ({ auth }) => ({ auth });

export default connect(mapStateToProps)(Scene);

然后在仪表板场景中：

import React from 'react';
import Scene from '../modules/Scene';
import Layout from '../components/Layout';

export default function Dashboard() {
  return (
    <Scene secure>
      <Layout>
        <Module1 />
        <Module2 />
      </Layout>
    </Scene>
  );
}