React Router 4에서 인증된 경로를 구현하는 방법은 무엇입니까?

React Router 4에서 인증된 경로 관리

React Router 4에서는 기존 접근 방식을 사용하여 인증된 경로를 직접 구현하는 것을 방지하는 변경 사항을 도입했습니다. 이 문제를 해결하기 위해 대체 솔루션을 살펴보겠습니다.

오류 발생:

초기 구현에서 <Route 구성 요소> 및 <하위 경로 지정> 이는 현재 React Router 4에서는 금지되어 있습니다.

제안된 접근 방식:

이 오류를 극복하기 위해 <Redirect> 사용자 정의 <PrivateRoute> 요소. <PrivateRoute> 구성 요소는 인증된 prop을 기반으로 조건부로 렌더링하여 원하는 경로를 표시하거나 사용자가 인증되지 않은 경우 로그인 페이지로 리디렉션합니다.

PrivateRoute 구성 요소:

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

업데이트된 경로:

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />

render() 메서드에서 작업 전달:

렌더링에서 작업 전달에 대한 우려 사항( ) 방법이 유효합니다. 잠재적인 부작용과 성능 문제가 발생할 수 있으므로 일반적으로 사용하지 않는 것이 좋습니다. 대신, componentDidMount와 같은 수명 주기 메서드에서 작업을 디스패치하거나 Redux 또는 Context API와 같은 React의 상태 관리 도구를 사용해야 합니다.

위 내용은 React Router 4에서 인증된 경로를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!