로그인 상태에 따라 React Router에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

로그인 상태에 따라 React Router에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-12 19:51:11

원래의

709명이 탐색했습니다.

How to Programmatically Navigate in React Router Based on Login Status?

react-router를 사용하여 프로그래밍 방식으로 탐색

웹 애플리케이션을 만들 때 특정 조건에 따라 경로를 변경해야 하는 경우가 종종 있습니다. 이 특정 시나리오의 목표는 사용자의 로그인 여부에 따라 경로를 동적으로 변경하는 것입니다.

withRouter 및 History.push를 사용하는 솔루션

React Router v4의 경우 한 가지 접근 방식은 다음과 같습니다. withRouter로 구성 요소를 래핑하고 프로그래밍 방식으로 탐색하려면 History.push 소품을 활용하세요. 구성요소가 라우터에 직접 연결되지 않은 경우에 권장됩니다.

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }
  render() {
    return <Login />;
  }
}
export default withRouter(App);

로그인 후 복사

Redirect를 사용한 솔루션

다른 방법은 Redirect 구성요소를 활용하는 것입니다. 이 옵션은 조건에 따라 특정 경로로 즉시 리디렉션하여 작동합니다.

import { withRouter } from 'react-router';

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      return <Redirect to="/home" />;
    }
    return <Login />;
  }
}
export default withRouter(App);

로그인 후 복사

React Router v2 또는 v3용 솔루션

React Router v2 또는 v3의 경우 컨텍스트를 사용하여 동적으로 경로 변경:

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    return <Login />;
  }
}
App.contextTypes = {
  router: React.PropTypes.object.isRequired
};
export default App;

로그인 후 복사

React Router용 추가 솔루션 v3

또한 React Router v3의 경우 browserHistory 모듈을 가져와 프로그래밍 방식 탐색을 구현할 수 있습니다.

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

로그인 후 복사

이러한 솔루션을 구현하면 특정 조건에 따라 React Router에서 동적으로 탐색할 수 있습니다. 올바른 구성요소가 로드되고 표시되는지 확인하여 사용자 경험을 향상시킵니다.

위 내용은 로그인 상태에 따라 React Router에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!