2017-12-01 8 views
0

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를 모두 제거하여 계층 구조에서 차단되지 않도록하십시오.

PrivateRouteconnect을 통해 redux를 사용하여 로그인 한 상태가되었습니다. 이를 제거하고 고정 값 false로 설정하여/login으로 리디렉션합니다.

PrivateRoute의 CONSOLE.LOG은 다음과 같습니다 다운 그레이드

enter image description here

답변

0

를 사용하여 정확한 정의하는 동안 루트

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

의견을 보내 주셔서 감사합니다. PrivateRoute의 리디렉션이 작동하지 않는 것 같습니다. – timbo

0

는 반응-라우터 REDUX을 알파 - 6. 리디렉션이 작동합니다.

- "react-router-redux": "5.0.0-alpha.8", 
+ "react-router-redux": "5.0.0-alpha.6", 
관련 문제