렌더링 기능을 수정하지 않고 React Router에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?

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

도전 과제:

React 애플리케이션에서 프로그래밍 방식으로 사용자 로그인 상태에 따라 다른 경로. 렌더링 기능을 변경하지 않고 이를 달성하는 방법을 잘 모르겠습니다.

React-Router v4용 솔루션:

기록 개체 사용:

withRouter로 구성요소를 래핑하고 props의 History.push 메소드를 활용하세요. 이 접근 방식은 구성 요소가 라우팅 prop을 허용하거나 라우터에 직접 연결되지 않은 경우에 유용합니다.

import { withRouter } from 'react-router';

class App extends React.Component {
...
componentDidMount() {
// Check user login status
if (isLoggedIn) {
// Redirect to home route
this.props.history.push('/home');
}
}
render() {
// Render login component
return <Login />;
}
}

export default withRouter(App);

리디렉션 사용:

더 간단한 시나리오의 경우 다음을 수행할 수 있습니다. Redirect를 사용하세요.

import { withRouter } from 'react-router';

class App extends React.Component {
...
render() {
// If user is logged in, redirect to home route
if (isLoggedIn) {
return <Redirect to="/home" />;
}
// Render login component
return <Login />;
}
}

React-Router 솔루션 v2/v3:

라우터 컨텍스트 사용:

구성 요소를 래핑하고 라우터 컨텍스트에 액세스하여 경로를 동적으로 변경합니다.

import React from 'react';

class App extends React.Component {
...
render() {
// Check user login status
if (isLoggedIn) {
// Change route using router context
this.context.router.push('/home');
}
// Render login component
return <Login />;
}
}

App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;

브라우저 사용하기 기록:

브라우저 기록에 직접 액세스하여 탐색을 실행할 수도 있습니다.

import { browserHistory } from 'react-router';

// Redirect to specific path
browserHistory.push('/some/path');

위 내용은 렌더링 기능을 수정하지 않고 React Router에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!