如果里面的函数涉及setState，那么共享函数的最佳方式是什么？我有一个用户授权函数，可以在所有页面上共享。
我有一个路由页面如下：

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Login/>
        </Route>
        <Route path="/pageA">
          <Navbar/>
          <Page content={PageA}/>
        </Route>
        <Route path="/pageB">
          <Navbar/>
          <Page content={PageB}/>
        </Route>
...

假设PageA和PageB在内部具有此函数

const axiosJWT = axios.create();

    axiosJWT.interceptors.request.use(async (config) => {
        const currentDate = new Date();
        if (expire * 1000 < currentDate.getTime()) {
            const response = await axios.get(`http://${host}/token`);
            config.headers.Authorization = `Bearer ${response.data.accessToken}`;
            setToken(response.data.accessToken);
            const decoded = jwt_decode(response.data.accessToken);
            setName(decoded.username);
            setExpire(decoded.exp);
        }
        return config;
    }, (error) => {
        return Promise.reject(error);
    });

正如你所看到的，我有setState需要完成。如果我必须为共享函数设置一个Util.js，唯一的方法是使用输入参数和返回值？我是在每个页面上还是在Util.js中设置const axiosJWT？