javascript - 如何使用 React Hooks 仅在用户访问的任何第一页设置状态？

Question

我正在学习 React Hooks，我需要在用户访问的第一页设置一个状态，并且它必须持续存在。

现在我正在这样做：

const Routes = () => {
  const [state, dispatch] = useContext(StoreContext);
  useEffect(async () => {
    const rates = await updateRates();
    dispatch({ type: "UPDATE_RATE", payload: rates });
  }, []);

  return (
    <BrowserRouter>
      <Route path="/" component={favicon} />
      <Route path="/" component={navbar} />
      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/signin" component={SignIn} />
        <Route path="/signup" component={SignUp} />
        <PrivateRoute path="/app" component={() => <h1>App</h1>} />
        <Route path="*" component={() => <h1>Page not found</h1>} />
      </Switch>
    </BrowserRouter>
  );
};

这是我的routes.js档案。但是，这会使状态更新用户访问的每个其他页面。例如，如果用户访问Main，则SignIn状态在渲染时更新Main，然后在渲染时再次更新SignIn。

我试图把我的App.js文件，但它没有工作。

提前致谢！

标签： javascriptreactjsreact-hooks