Правильное место для настройки прослушивателя истории React Router - PullRequest
Новая
       21

Правильное место для настройки прослушивателя истории React Router

0 голосов
/ 17 марта 2019

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

В настоящее время мой App.jsвыглядит так: 

    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={Home}/>
                    <Route path="/" component={MainLayout}/>
                </Switch>
            </BrowserRouter>
        );
    }

Как я понимаю, я могу использовать только history внутри BrowserRouter, но у него может быть только один дочерний элемент, поэтому я могу поместить его только в Switch, но тогдаМне придется поместить его внутри каждого компонента в Switch, что я не могу сделать, поскольку хочу, чтобы он запускался только один раз.Если я просто добавлю пользовательский компонент в Switch, не заключая его в Router, истории не будет.

Что я должен изменить, чтобы он работал?Можно ли получить экземпляр history в коде App.js?Можно ли добиться с помощью пользовательского компонента или HOC?

Ответы [ 3 ]

1 голос
/ 17 марта 2019

Вам нужно добавить Route, который будет отображаться безоговорочно. Попробуйте что-то вроде этого: 

render() {
    return (
        <BrowserRouter>
            <React.Fragment>
                <Route component={HistoryListenerComponent}/>
                <Switch>
                    <Route path="/" exact component={Home}/>
                    <Route path="/" component={MainLayout}/>
                </Switch>
            </React.Fragment>
        </BrowserRouter>
    );
}

Так что HistoryListenerComponent всегда отображается, и вы можете listen из его componentDidMount.

0 голосов
/ 23 апреля 2019

Обнаружено, что самым простым вариантом является компонент Обновление - https://github.com/pshrmn/rrc/blob/master/docs/OnUpdate.md

0 голосов
/ 17 марта 2019

Возможно использование пакета history вместо использования пакета по умолчанию, созданного реагирующим маршрутизатором.

Например, использование history.listen: 

  history.listen((location) => {
    ReactGA.pageview(location.pathname + window.location.search);
  });

В моем примере я использую react-ga, как способ стандартизации наших инструментов GA в проектах.

...