React Router v2, v3 및 v4에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?

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

많은 React 애플리케이션에서는 사용자 인증과 같은 특정 조건에 따라 경로 간을 프로그래밍 방식으로 탐색해야 하는 시나리오가 있을 수 있습니다. . React-router를 사용하여 이를 달성하는 방법은 다음과 같습니다.

react-router v4

react-router v4에서는 withRouter HOC(Higher-Order Component)를 사용하여 기록 props에 액세스할 수 있습니다. push()를 포함하여 프로그래밍 방식으로 경로를 변경합니다. 예시에서 이를 구현하는 방법은 다음과 같습니다.

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    const isLoggedIn = // Get isLoggedIn from localStorage or API call

    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }

  render() {
    // Return login component
    return <Login />;
  }
}

export default withRouter(App);

react-router v2 또는 v3

이전 버전의 React-router(v2 및 v3)에서는 컨텍스트를 사용하여 변경할 수 있습니다. 다음 예와 같은 경로:

import React, { Component } from 'react';
import { Router, Route, Link, browserHistory } from 'react-router';

class App extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object.isRequired,
  };

  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    // Return login component
    return <Login />;
  }
}
export default App;

react-router를 사용한 대체 접근 방식 v4

또한, React-router v4는 프로그래밍 방식으로 탐색하는 대체 방법을 제공합니다.

• 리디렉션: Redirect 구성 요소를 사용하여 조건에 따라 사용자를 리디렉션할 수 있습니다. 다음에서 볼 수 있듯이 예:

import { BrowserRouter as Router, Redirect } from 'react-router-dom';

function App() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  return (
    <Router>
      {isLoggedIn ? <Redirect to='/home' /> : <Login />}
    </Router>
  );
}
export default App;

• browserHistory.push(): 다음과 같이 browserHistory.push() 메서드를 직접 사용하여 프로그래밍 방식으로 경로를 변경할 수도 있습니다. 다음 예:

import { browserHistory } from 'react-router';

componentDidMount() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  if (isLoggedIn) {
    browserHistory.push('/home');
  }
}

최적의 접근 방식은 귀하의 애플리케이션은 특정 요구 사항 및 코드베이스에 따라 달라질 수 있습니다.

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