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，然后使用您的＆＃34; main＆＃34;的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);

然后在Dashboard场景中：

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

如何更改反应路由器路由？

2 个答案: