未登录用户的预期重定向到/登录页面未发生

时间:2017-12-01 00:53:58

标签: reactjs react-router-v4

我尝试使用React Router V4实现一个相当简单的方案,但未发生未登录用户的预期重定向到 / login 页面。

主要App组件是:

export class App extends Component {

  render() {
    return (
      <div className="app">
        <Helmet
          titleTemplate="%s"
        </Helmet>
        <Navigation />
        <Switch location={this.props.location} >
          <Route path="/login" component={Login} />
          <PrivateRoute exact path="/" component={HomePage} />
        </Switch>
      </div>
    );
  }
}

App.propTypes = {
  location: PropTypes.object,
};

const mapStateToProps = createStructuredSelector({
  location: makeSelectLocation(),
});

export default connect(mapStateToProps)(App);

并且PrivateRoute实现

class PrivateRoute extends Component {
  render() {
    const {
      component: Component,
      ...props
    } = this.props;
    console.log(props.location)

    return (
      <Route
        {...props}
        render={props =>
          false
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location }  }} />
        }
      />
    );
  }
}

PrivateRoute.propTypes = {
  component: PropTypes.func,
};

export default PrivateRoute;

在加载localhost ie&#34; /&#34;时,我看到浏览器中的url更改为/ login,但在Redux中只有@@ INIT,然后是@@ router / LOCATION_CHANGE,路径名为& #39; /&#39 ;.

我知道阻止更新问题,因此我已删除代码库中所有PureComponent的使用,以确保它不会在层次结构中阻塞。

PrivateRoute通过connect使用redux来获取登录状态。我已将其删除,只需输入固定值false即可重定向到/ login。

PrivateRoute中的console.log是:

enter image description here

2 个答案:

答案 0 :(得分:0)

在定义路线时使用精确

<Route exact path="/login" component={Login} />

答案 1 :(得分:0)

将react-router-redux降级为alpha-6。重定向现在有效。

-    "react-router-redux": "5.0.0-alpha.8",
+    "react-router-redux": "5.0.0-alpha.6",