React Router V4를 사용하여 비교적 간단한 시나리오를 구현하려고하지만 로그인하지 않은 사용자의 /login 페이지로의 리디렉션이 발생하지 않습니다. .로그인하지 않은 사용자의/login 페이지로의 예상 리디렉션이 발생하지 않습니다.
주요 응용 프로그램 구성 요소는 다음과 같습니다, 나는,/로그인에 브라우저 변화에 URL을 참조
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;
하지만, Redux에는 경로 이름이 '/'인 @@ INIT와 @@ router/LOCATION_CHANGE 만 있습니다.
차단 된 업데이트 문제를 알고 있으므로 코드베이스에서 PureComponent를 모두 제거하여 계층 구조에서 차단되지 않도록하십시오.
PrivateRoute
connect
을 통해 redux를 사용하여 로그인 한 상태가되었습니다. 이를 제거하고 고정 값 false로 설정하여/login으로 리디렉션합니다.
PrivateRoute의 CONSOLE.LOG은 다음과 같습니다 다운 그레이드
의견을 보내 주셔서 감사합니다. PrivateRoute의 리디렉션이 작동하지 않는 것 같습니다. – timbo