React：每当激活路由时如何执行代码？

Question

我正在使用react-router，而且我想在每次路由时执行代码（启动计时器），例如＆＃34; /＃/ home＆＃34;被激活了。

我该怎么做？

Answer 1

使用react-routing库可能看起来像这样：

const router = new Router(on => {

  on('*', async (state, next) => {
    console.log('start: load the child component');
    const component = await next();
    console.log('end: load the child component');
    return <App>{component}</App>;
  });

  on('/hello', async () => <HelloComponent />);

});

router.dispatch({path: '/hello'}, component =>
   React.render(component, document.body)
);

或者，这是一个示例，如何在不使用任何第三方路由库的情况下执行相同操作：

https://twitter.com/koistya/status/609762956646219776

Answer 2

查看静态方法willTransitionTo。它在路由加载组件之前触发。 Route Handler

更好的解决方案可能是在路由器中添加一些代码以捕获时间戳，然后将其传递给路由组件......

Router.run(routes, Router.HashLocation, (Root) => {
  var runTime = new Date();
  React.render(<Root runTime={runTime}/>, document.body);
});

然后在componentDidMount中确定now和this.props.runTime之间的秒数，然后启动计数器以跟踪时间之后的时间。