React-Router 5.1.0+ 답변 (후크 사용 및 React> 16.8)
useHistory기능 구성 요소 의 새로운 후크를 사용 하고 프로그래밍 방식으로 탐색 할 수 있습니다.
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
반응 라우터 4.0.0+ 답변
4.0 이상에서는 히스토리를 컴포넌트의 소품으로 사용하십시오.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
참고 :이 컴포넌트가에 의해 렌더링되지 않은 경우 this.props.history는 존재하지 않습니다 <Route>. <Route path="..." component={YourComponent}/>YourComponent에 this.props.history가 있어야합니다.
반응 라우터 3.0.0+ 답변
3.0 이상에서는 라우터를 컴포넌트의 소품으로 사용하십시오.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
반응 라우터 2.4.0+ 답변
2.4 이상에서는 상위 구성 요소를 사용하여 라우터를 구성 요소의 소품으로 가져옵니다.
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
반응 라우터 2.0.0+ 답변
이 버전은 1.x와 역 호환되므로 업그레이드 안내서가 필요하지 않습니다. 예제를 살펴 보는 것만으로도 충분합니다.
즉, 새로운 패턴으로 전환하려면 라우터 내부에 액세스 할 수있는 browserHistory 모듈이 있습니다.
import { browserHistory } from 'react-router'
이제 브라우저 기록에 액세스 할 수 있으므로 밀어 넣기, 바꾸기 등의 작업을 수행 할 수 있습니다.
browserHistory.push('/some/path')
추가 자료 :
기록 및
탐색
반응 라우터 1.xx 답변
나는 세부 사항을 업그레이드하지 않을 것입니다. 업그레이드 안내서 에서 이에 대해 읽을 수 있습니다
여기서 질문에 대한 주요 변경 사항은 탐색 믹스 인에서 기록으로 변경되었습니다. 이제 브라우저 historyAPI를 사용하여 경로를 변경하므로 앞으로 사용할 것 pushState()입니다.
다음은 Mixin을 사용하는 예입니다.
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
이주의 History에서 온다 rackt / 역사 프로젝트. React-Router 자체가 아닙니다.
ES6 클래스로 인해 어떤 이유로 Mixin을 사용하지 않으려면 라우터에서 가져온 기록에 액세스 할 수 있습니다 this.props.history. 라우터에서 렌더링 한 구성 요소에만 액세스 할 수 있습니다. 따라서 하위 구성 요소에서 사용하려면를 통해 속성으로 전달해야합니다 props.
1.0.x 설명서 에서 새 릴리스에 대한 자세한 내용을 읽을 수 있습니다
컴포넌트 외부 탐색에 대한 도움말 페이지 는 다음과 같습니다.
참조를 잡고 history = createHistory()호출 하는 것이 좋습니다 replaceState.
반응 라우터 0.13.x 답변
나는 같은 문제에 봉착했고 반응 라우터와 함께 제공되는 Navigation 믹스 인 솔루션 만 찾을 수있었습니다.
내가 한 방법은 다음과 같습니다
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
transitionTo()액세스 할 필요없이 전화를 걸 수있었습니다.context
아니면 당신은 멋진 ES6를 시도 할 수 있습니다 class
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
반응 라우터 루덕
참고 : Redux 를 사용하는 경우 React-Redux 와 동일한 접근 방식을 사용하여 ReactRouter에 대한 redux 바인딩을 제공하는
React-Router-Redux 라는 또 다른 프로젝트
가 있습니다.
React-Router-Redux에는 액션 제작자 내부를 간단하게 탐색 할 수있는 몇 가지 방법이 있습니다. 이는 React Native에 기존 아키텍처가있는 사람들에게 특히 유용 할 수 있으며, 보일러 플레이트 오버 헤드를 최소화하면서 React Web에서 동일한 패턴을 활용하고자합니다.
다음 방법을 탐색하십시오.
push(location)replace(location)go(number)goBack()goForward()
다음은 Redux-Thunk 사용 예입니다 .
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>