Я хотел бы отображать title в , который каким-то образом передается из текущего маршрута.

В React Router v4, как сможет передать текущий маршрут в его title prop?

  
    

Есть ли способ передать настраиваемый заголовок из настраиваемого prop на ?

Ответы (8)

В версии response-router 5.1 есть ловушка с именем useLocation, которая возвращает текущий объект местоположения. Это может пригодиться в любое время, когда вам понадобится узнать текущий URL.

import { useLocation } from 'react-router-dom'

function HeaderView() {
  const location = useLocation();
  console.log(location.pathname);
  return Path : {location.pathname}
}

Я думаю, что автор React Router (v4) просто добавил это withRouter HOC, чтобы успокоить определенных пользователей. Однако я считаю, что лучший подход - просто использовать свойство render и создать простой компонент PropsRoute, который передает эти свойства. Это легче проверить, поскольку он не «подключает» компонент, как это делает withRouter. Оберните кучу вложенных компонентов в withRouter, и это будет неинтересно. Еще одним преимуществом является то, что вы также можете использовать этот проход через любые реквизиты, которые вы хотите для Маршрута. Вот простой пример использования рендеринга. (в значительной степени точный пример с их веб-сайта 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 }) => (
   () }
  />
);

export default PropsRoute;

использование: (обратите внимание, чтобы получить параметры маршрута (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.

Это может выглядеть примерно так:

импорт {withRouter} из 'response-router-dom';

const SomeComponent = withRouter (props => );

class MyComponent расширяет React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}

В react-router v5 есть ловушка под названием useLocation, без HOC и прочего, очень лаконично и удобно.

import { useLocation } from 'react-router-dom';

const ExampleComponent: React.FC = () => {
  const location = useLocation();  

  return (
    
      
); }

Имеет Con Posidielov сказал, что текущий маршрут присутствует в this.props.location.pathname.

Но если вы хотите сопоставить более конкретное поле, такое как ключ (или имя), вы можете использовать matchPath, чтобы найти исходную ссылку на маршрут.

import { matchPath } from `react-router`

const routes = [{
  key: 'page1'
  exact: true,
  path: '/page1/:someparam/',
  component: Page1,
},
{
  exact: true,
  key: 'page2',
  path: '/page2',
  component: Page2,
},
]

const currentRoute = routes.find(
  route => matchPath(this.props.location.pathname, route)
)

console.log(`My current route key is : ${currentRoute.key}`)

Добавить

import {withRouter} from 'react-router-dom';

Затем измените экспорт компонентов

export default withRouter(ComponentName)

Затем вы можете получить доступ к маршруту непосредственно в самом компоненте (не касаясь чего-либо еще в вашем проекте), используя:

window.location.pathname

Протестировано в марте 2020 г. с: "version": "5.1.2"

Вот решение, использующее историю Подробнее

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

внутри маршрутизатора


   {history.location.pathname}

Если вы используете шаблоны реакции, где конец вашего файла реакции выглядит следующим образом: экспорт по умолчанию SomeComponent вам необходимо использовать компонент более высокого порядка (часто называемый «HOC»),с роутером.

Сначала вам нужно импортировать withRouter вот так:

import {withRouter} from 'react-router-dom';

Затем вы захотите использовать withRouter. Вы можете сделать это, изменив экспорт вашего компонента. Вероятно, вы захотите изменить с экспорт по умолчанию ComponentName на экспорт по умолчанию withRouter (ComponentName).

Тогда вы можете получить маршрут (и другую информацию) из реквизита. В частности, местоположение, соответствуети история. Код для выдачи имени пути будет:

console.log(this.props.location.pathname);

Хорошая запись с дополнительной информацией доступна здесь: https://reacttraining.com/react-router/core/guides/philosophy

2022 WebDevInsider