React Router v4 – Как получить текущий маршрут?
Я хотел бы отобразить title в который каким-то образом передается с текущего маршрута.
В React Router v4, как сможет получить текущий маршрут, переданный в его title ?
Есть ли способ передать пользовательский заголовок из пользовательской prop в ?
- Навигация по программному обеспечению в React-Router v4
- Программный переход в React-Router v4
- Ошибка неактивности: инвариантное нарушение: тип элемента недействителен: ожидается строка (для встроенных компонентов) или class / функция, но получен: объект
- Программно перемещаться с помощью реагирующего маршрутизатора
- React Router v4 предоставляет несколько маршрутов
- Как вложить маршруты в React Router v4?
- Как передать параметры с помощью history.push в response-router v4?
- Вложенные маршруты в реакционном маршрутизаторе v4
- Как остановить / # / в браузере с помощью ретранслятора?
- Обнаружение страницы, удаляющей пользователя с помощью ретранслятора
- Компонент не восстанавливается при изменении параметров маршрута
- Должны ли хранилища streamов или действия (или оба) касаться внешних служб?
- React router и this.props.children - как передать состояние this.props.children
Я думаю, что автор React Router (v4) просто добавил, что с Router HOC, чтобы успокоить некоторых пользователей. Однако я считаю, что лучший подход заключается в том, чтобы просто использовать render prop и создать простой компонент PropsRoute, который передает эти реквизиты. Это легче проверить, так как вы не «подключаете» компонент, например, с помощью Router. Имейте кучу вложенных компонентов, завернутых в Router, и это не будет весело. Другим преимуществом является то, что вы также можете использовать этот пропуск через любые реквизиты, которые вы хотите на Маршрут. Вот простой пример использования render prop. (в значительной степени точный пример с их сайта https://reacttraining.com/react-router/web/api/Route/render-func ) (src / components / routes / props-route)
import React from 'react'; import { Route } from 'react-router'; export const PropsRoute = ({ component: Component, ...props }) => ( (
использование: (уведомление для получения параметров маршрута (match.params) вы можете просто использовать этот компонент, и те будут переданы вам)
import React from 'react'; import PropsRoute from 'src/components/routes/props-route'; export const someComponent = props => (
также обратите внимание, что вы могли бы передать все дополнительные реквизиты, которые хотите этого
В ответном маршрутизаторе 4 текущий маршрут находится в – this.props.location.pathname . Просто получите this.props и проверьте. Если вы все еще не видите location.pathname вы должны использовать декоратор withRouter .
Это может выглядеть примерно так:
import {withRouter} from 'react-router-dom'; ... const SomeComponent = withRouter(props =>
Если вы используете шаблоны реакции, где конец вашего файла реакции выглядит следующим образом: export default SomeComponent вам. Вы должны использовать компонент более высокого порядка, с withRouter .
Во-первых, вам нужно импортировать с помощью Router: import {withRouter} from 'react-router-dom';
Затем вы захотите использовать withRouter. Вы можете сделать это, изменив экспорт своих компонентов … из export default ComponentName для export default withRouter(ComponentName) .
Затем вы можете получить маршрут (и другую информацию) из реквизита. В частности, location , match и history . Код для вышивания имени пути будет console.log(this.props.location.pathname);
Хорошая запись доступна здесь: https://reacttraining.com/react-router/core/guides/philosophy