Відповідь 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}/>щоб мати 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, тому немає необхідності в Посібнику з оновлення. Просто перегляд прикладів повинен бути досить хорошим.
Це означає, що якщо ви хочете перейти на новий зразок, всередині маршрутизатора є модуль історії браузера, до якого ви можете отримати доступ
import { browserHistory } from 'react-router'
Тепер у вас є доступ до історії вашого веб-переглядача, тому ви можете робити такі дії, як "push", "заміна" тощо ...
browserHistory.push('/some/path')
Подальше читання:
Історії та
навігація
Реагувати-маршрутизатор 1.xx Відповідь
Я не буду вникати в оновлення деталей. Про це можна прочитати в Посібнику з оновлення
Основна зміна питання тут - це зміна навігаційного міксину на історію. Тепер він використовує історію браузера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. Він буде доступний лише для компонентів, наданих маршрутизатором. Отже, якщо ви хочете використовувати його в будь-яких дочірніх компонентах, його потрібно передавати як атрибут via 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
};
React-Router-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>