Question

我正在尝试在最高级别设置历史记录侦听器，以便每次位置更改时都执行一些代码（在我的情况下为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是否可以实现？

Answer 1

您需要添加一个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的{{1}}中获取它。

Answer 2

这对我有用：

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

现在只需将带有ReactRouter的组件包装在withRouter中，就像这样：

    componentDidMount=()=>{
         ReactGa.initialize('00000'); //enter id
        ReactGa.pageview(window.location.pathname + window.location.search);
        
        this.props.history.listen(location => {
            ReactGa.set({ page: location.pathname }); // Update the user's current page
            ReactGa.pageview(location.pathname); // Record a pageview for the given page
        });
    }
    render (){
       return (
         <Switch>
<Route ....>
.....
<Switch>
     );
     }
export default withRouter(ComponentName)

请记住，如果不使用Router进行包装，则不能使用this.props.history属性。您不能将自定义历史记录侦听器用于BrowserRouter组件。它具有内置的历史记录道具（即this.props.history）。

Answer 3

可以使用history软件包，而不是依赖于React Router创建的默认软件包。

例如，使用history.listen：

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

在我的示例中，我使用react-ga作为标准化我们跨项目的GA规范的方法。

Answer 4

Found out that the easiest option is the Update component -- https://github.com/pshrmn/rrc/blob/master/docs/OnUpdate.md

设置React Router历史监听器的正确位置

4 个答案: