我尝试使用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是:
答案 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",