Ответ 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
};
React-Router 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}/>чтобы иметь this.props.history в YourComponent
React-Router 3.0.0+ Ответ
В версии 3.0 и выше используйте маршрутизатор в качестве опоры для вашего компонента.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 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
};
React-Router 2.0.0+ Ответ
Эта версия обратно совместима с 1.x, поэтому нет необходимости в Руководстве по обновлению. Просто пройтись по примерам должно быть достаточно хорошо.
Тем не менее, если вы хотите переключиться на новый шаблон, внутри маршрутизатора есть модуль browserHistory, к которому вы можете получить доступ с помощью
import { browserHistory } from 'react-router'
Теперь у вас есть доступ к истории браузера, поэтому вы можете выполнять такие операции, как push, replace и т. Д.
browserHistory.push('/some/path')
Дальнейшее чтение:
истории и
навигация
React-Router 1.xx Ответ
Я не буду вдаваться в детали обновления. Вы можете прочитать об этом в Руководстве по обновлению.
Основное изменение в этом вопросе - это переход от Mixin навигации к истории. Теперь он использует историю браузера API для изменения маршрута, поэтому мы будем использовать его с этого момента pushState().
Вот пример использования Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Обратите внимание, что это Historyпроисходит из проекта rackt / history . Не от самого React-Router.
Если вы не хотите использовать Mixin по какой-либо причине (возможно, из-за класса ES6), то вы можете получить доступ к истории, полученной от маршрутизатора this.props.history. Он будет доступен только для компонентов, предоставляемых вашим маршрутизатором. Итак, если вы хотите использовать его в любых дочерних компонентах, его нужно передать как атрибут через props.
Вы можете прочитать больше о новой версии в их документации 1.0.x.
Вот справочная страница, посвященная навигации за пределами вашего компонента
Он рекомендует взять ссылку history = createHistory()и обратиться replaceStateк ней.
React-Router 0.13.x Ответ
Я попал в ту же проблему и смог найти решение только с помощью навигационного миксина, который поставляется с реагирующим маршрутизатором.
Вот как я это сделал
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
Примечание: если вы используете Redux, есть еще один проект под названием
ReactRouter-Redux , который дает вам Redux привязок для ReactRouter, используя несколько тот же подход , что
React-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>