如何在路线更改时触发功能？

Question

我的路线：

<Provider store={store}>
  <Router>
    <Fragment>
      <Navbar />
      <Switch>
        <Route exact={true} path="/" component={Landing} />
        <Route exact={true} path="/register" component={Register} />
        <Route exact={true} path="/login" component={Login} />
        <Route path="*" exact={true} component={PageNotFound} />
      </Switch>
    </Fragment>
  </Router>
</Provider>

每当我从一条路线移动到另一条路线时，我只想触发一些功能，例如调度等。例如，当我从“/register”移动到“/login”时，我想使用 dispatch 来修改我的商店状态。 有什么好的办法？

Answer 1

阅读此答案：

How to listen to route changes in react router v4?

示例：

class Router extends React.Component {

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.changedRoute();
    }
  }

  changedRoute() {
    console.log("route Changed, new location : ",this.props.location);
  }

  render(){
    return (
       <BrowserRouter>
          <Switch>
             <Route path="/" exact component={Landing} />
             <Route path="/register" component={Register} />
             <Route path="/login" component={Login} />

             <Route component={NotFound} />
          </Switch>
       </BrowserRouter>
    )
  }
}

Answer 2

您可以从传递给 Route 组件的组件中分派动作。如果您的组件基于类，请使用 componentDidMount。如果您的组件是 FunctionComponent，请使用 useEffect。

例如，对于 <Route exact path="/login" component={Login} />，您的登录组件应该是。

const Login = () => {
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch({ type: 'login' });
  }, [dispatch]);
};