Якщо ви орієнтуєтесь на середовища браузера, вам потрібно використовувати react-router-domпакунок замість react-router. Вони слідують такому ж підходу , як React зробили для того, щоб відокремити ядро, ( react) і код платформи конкретного, ( react-dom, react-native) з тонким розходженням , що вам не потрібно встановлювати два окремих пакетів, так як пакети середовища містять всі тобі потрібно. Ви можете додати його до свого проекту як:
yarn add react-router-dom
або
npm i react-router-dom
Перше, що вам потрібно зробити - це забезпечити <BrowserRouter>як найвищий батьківський компонент у вашій програмі. <BrowserRouter>використовує historyAPI HTML5 та керує ним для вас, тож вам не доведеться турбуватися про його інстанціювання та передачу його <BrowserRouter>компоненту в якості опори (як це потрібно було зробити в попередніх версіях).
У програмі V4 для програмного навігації вам потрібно отримати доступ до historyоб'єкта, який доступний через React context, доки у вас є компонент <BrowserRouter> постачальника як самий верхній з батьків у вашій програмі. Бібліотека розкриває через контекст routerоб'єкт, який сам містить historyяк властивість. historyІнтерфейс пропонує кілька методів навігації, такі як push, replaceі goBack, серед інших. Ви можете перевірити весь перелік властивостей та методів тут .
Важлива примітка для користувачів Redux / Mobx
Якщо ви використовуєте функцію redux або mobx як свою бібліотеку управління державою у вашій програмі, можливо, у вас виникли проблеми з компонентами, які мають бути відомими місцеположенням, але не повторюватися після запуску оновлення URL-адреси.
Це відбувається тому, що react-routerпереходить locationдо компонентів за допомогою контекстної моделі.
Як підключення, так і спостерігач створюють компоненти, методи методу shouldComponentUpdate дозволяють дрібне порівняння їх поточного реквізиту та їх наступних реквізитів. Ці компоненти відновляться лише тоді, коли зміниться хоча б одна опора. Це означає, що для того, щоб вони оновлювались, коли місцеположення змінюється, їм потрібно буде запропонувати опору, яка змінюється, коли місцеположення змінюється.
Два підходи до вирішення цього питання:
- Оберніть ваш підключений компонент без доріжок
<Route />. Поточний locationоб'єкт є одним із реквізитів, що <Route>передає компонент, який він надає
- Оберніть ваш підключений компонент компонентом
withRouterвищого порядку, який насправді має такий же ефект і впорскується locationяк опора
Виходячи з цього, існує чотири способи програмно орієнтуватися впорядковано за рекомендаціями:
1.- Використання <Route>компонента
Він пропагує декларативний стиль. До
<Route />версії v4 компоненти були розміщені у верхній частині ієрархії компонентів, заздалегідь потрібно продумати структуру ваших маршрутів. Однак тепер ви можете мати
<Route>компоненти в
будь-якому місці вашого дерева, що дозволяє вам мати більш точний контроль за умовно візуалізацією залежно від URL-адреси.
Routeвпорскує
match,
locationа в
historyякості реквізиту в компонент. Методи навігації (такі як
push,
replace,
goBack...) доступні як властивості
historyоб'єкта.
Є 3 способи робить що - то з Route, використовуючи або component, renderабо childrenреквізит, але не використовувати більше одного в тому ж самому Route. Вибір залежить від випадку використання, але в основному перші два варіанти відображатимуть ваш компонент лише у тому випадку, якщо він pathвідповідає розташуванню URL-адреси, тоді як з childrenкомпонентом буде виведено, чи збігається шлях з місцеположенням чи ні (корисно для налаштування інтерфейсу користувача на основі URL-адреси) відповідність).
Якщо ви хочете , щоб налаштувати вихід компонентного рендеринга , вам потрібно обернути компонент в функції і використовувати renderопцію для того, щоб перейти до компоненті будь-які інші реквізиту ви бажаєте, крім match, locationі history. Приклад ілюстрації:
import { BrowserRouter as Router } from 'react-router-dom'
const ButtonToNavigate = ({ title, history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
{title}
</button>
);
const SomeComponent = () => (
<Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)
const App = () => (
<Router>
<SomeComponent /> // Notice how in v4 we can have any other component interleaved
<AnotherComponent />
</Router>
);
2.- Використання withRouterHoC
Цей компонент вищого порядку вводить ті ж реквізити, що і Route. Однак це обмежує обмеження, що у вас може бути лише 1 HoC на файл.
import { withRouter } from 'react-router-dom'
const ButtonToNavigate = ({ history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
Navigate
</button>
);
ButtonToNavigate.propTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired,
}),
};
export default withRouter(ButtonToNavigate);
3.- Використання Redirectкомпонента
Надання заходу
<Redirect>перейде до нового місця. Але майте на увазі, що
за замовчуванням поточне місце розташування замінюється новим, як перенаправлення на сторону сервера (HTTP 3xx). Нове місце розташування надається
toопорою, яка може бути рядком (URL-адресою для переадресації) або
locationоб'єктом. Якщо ви хочете, замість цього,
натиснути новий запис на історію , також
pushвведіть опору та встановіть її
true
<Redirect to="/your-new-location" push />
4.- Доступ routerвручну через контекст
Трохи відлякує, оскільки
контекст все ще є експериментальним API, і він, ймовірно, може зламати / змінити в майбутніх випусках React
const ButtonToNavigate = (props, context) => (
<button
type="button"
onClick={() => context.router.history.push('/my-new-location')}
>
Navigate to a new location
</button>
);
ButtonToNavigate.contextTypes = {
router: React.PropTypes.shape({
history: React.PropTypes.object.isRequired,
}),
};
Потрібно сказати, що є також інші компоненти маршрутизатора, призначені для екосистем, які не є браузером, такі як <NativeRouter>копія навігаційного стеку в пам'яті та цільових платформ React Native, доступних через react-router-nativeпакет.
Для будь-якої подальшої довідки, не соромтеся поглянути на офіційні документи . Також є відео, зроблене одним із співавторів бібліотеки, яке забезпечує досить круте вступ у реагування на маршрутизатор v4, підкреслюючи деякі основні зміни.