За допомогою react-router
я можу використовувати елемент Link
для створення посилань, які нативно обробляються реактивним маршрутизатором.
Я бачу, що внутрішньо він викликає this.context.transitionTo(...)
.
Я хочу зробити навігацію, але не з посилання, а з випадаючого списку, наприклад. Як це зробити в коді? Що таке this.context
?
Я бачив міксин Navigation
, але чи можна це зробити без міксинів?
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'
Тепер у вас є доступ до історії вашого браузера, так що ви можете робити такі речі, як виштовхування, заміна і т.д. ... Наприклад:
browserHistory.push('/some/path')
Додаткова інформація: Історії та Навігація
React-Router 1.x.x Відповідь
Я не буду вдаватися в деталі оновлення. Ви можете прочитати про це в Керівництві по оновленню
Основною зміною в цьому питанні є заміна міксіну Navigation на History. Тепер він використовує historyAPI браузера для зміни маршруту, тому ми будемо використовувати pushState()
відтепер.
Ось приклад використання міксіну:
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 Відповідь
Я зіткнувся з такою ж проблемою і зміг знайти рішення тільки за допомогою Navigation mixin, який поставляється з react-router.
Ось як я це зробив
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 </gt Примітка: якщо ви використовуєте Redux, існує інший проект під назвою React-Router-Redux, який дає вам редукс-зв'язки для ReactRouter, використовуючи приблизно той самий підхід, що і в [React-Router-Redux React-Redux
React-Router-Redux має кілька доступних методів, які дозволяють здійснювати просту навігацію зсередини творців дій. Вони можуть бути особливо корисними для людей, які мають існуючу архітектуру в React Native і бажають використовувати ті ж патерни в React Web з мінімальними витратами на шаблони.
Вивчіть наступні методи:
push(location)
replace(location)
go(номер)
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>
React-Router v2
Для останньої версії (v2.0.0-rc5
) рекомендованим методом навігації є пряме натискання на синглтон історії. Ви можете побачити це в дії в документі Навігація за межами компонентів doc.
Відповідний уривок:
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
Якщо ви використовуєте новіший API react-router, вам потрібно використовувати history
з this.props
, коли ви перебуваєте всередині компонентів так:
this.props.history.push('/some/path');
Він також пропонує pushState
, але він застарілий через зареєстровані попередження.
Якщо ви використовуєте react-router-redux
, він пропонує функцію push
, яку ви можете відправити таким чином:
import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));
Однак це може бути використано лише для зміни URL-адреси, а не для фактичного переходу на сторінку.
Попередження:** ця відповідь стосується лише версій ReactRouter до 1.0
Я оновлю цю відповідь з 1.0.0-rc1 варіантами використання після!
Ви можете зробити це і без міксинів.
let Authentication = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
Проблема з контекстами полягає в тому, що вони недоступні, якщо ви не визначите contextTypes
у класі.
Щодо того, що таке контекст, то це об'єкт, подібний до пропсів, який передається від батьків до нащадків, але передається неявно, без необхідності кожного разу перевизначати пропси. Дивіться https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html