React应用启动时基于LocalStorage存储的筛选器实现路由跳转的问题咨询

你的问题核心在于路由跳转逻辑执行时机过早——在history.ts初始化时就尝试推送路由，但此时UserContext和认证流程还没完成初始化，导致应用在认证URL和目标URL之间来回冲突。setTimeout能临时解决是因为它给了上下文足够的初始化时间，但这是不可靠的“ hack ”，我们需要更优雅的方案：

1. 重构history.ts，剥离业务逻辑 #

首先让history回归单纯的路由工具角色，不要在初始化时加入跳转逻辑：

// /utils/history.ts
import { createBrowserHistory } from 'history';

const history = createBrowserHistory({ basename: process.env.PUBLIC_URL });
export default history;

2. 创建初始化组件，在上下文就绪后执行跳转 #

写一个专门的AppInitializer组件，放在UserContext内部，利用React生命周期确保只有当用户认证/上下文就绪后，再读取LocalStorage并执行路由跳转：

// /AppInitializer.tsx
import React, { useEffect, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import pathsConst from './const/paths';
import UserContext from './modules/UserContext';

const AppInitializer = () => {
  const history = useHistory();
  // 假设UserContext提供了认证状态（如果没有，可以根据adal.idtoken的存在判断）
  const { isAuthenticated } = useContext(UserContext);

  useEffect(() => {
    // 等待认证完成/上下文初始化
    if (!isAuthenticated && !localStorage.getItem("adal.idtoken")) return;

    // 读取LocalStorage中的历史参数
    const lastPathTemp = localStorage.getItem("lastPath");
    const lastQueryString = localStorage.getItem("lastQueryString");
    
    if (!lastPathTemp || !lastQueryString) return;

    // 匹配目标路由
    let targetPath = pathsConst.INDEX;
    if (lastPathTemp.includes('weekly')) targetPath = pathsConst.WEEKLY_VIEW;
    else if (lastPathTemp.includes('monthly')) targetPath = pathsConst.MONTHLY_VIEW;

    // 构造新的查询字符串（保留原参数，替换date为当前时间）
    let targetSearch = `?date=${Date.now()}`;
    if (lastQueryString.includes('&')) {
      const extraParams = lastQueryString.slice(lastQueryString.indexOf('&'));
      targetSearch += extraParams;
    }

    // 避免重复跳转，防止循环
    const currentPath = history.location.pathname;
    const currentSearch = history.location.search;
    if (currentPath !== targetPath || currentSearch !== targetSearch) {
      history.push({ pathname: targetPath, search: targetSearch });
    }
  }, [history, isAuthenticated]);

  return null; // 组件无需渲染UI
};

export default AppInitializer;

3. 在App.tsx中引入初始化组件 #

把AppInitializer放在UserContext内部，确保它能获取到上下文状态：

// App.tsx
// ... 其他import
import AppInitializer from './AppInitializer';

const App = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <CssBaseline />
        <UserContext>
          <AppInitializer /> {/* 加入初始化组件 */}
          <Switch>
            <Route exact path={pathsConst.INDEX} component={DailyView} />
            <Route exact path={pathsConst.WEEKLY_VIEW} component={WeeklyView} />
            <Route exact path={pathsConst.MONTHLY_VIEW} component={MonthlyView} />
            <Route component={NotFound} />
          </Switch>
          <FactBox />
          <ModalRoot />
        </UserContext>
      </MuiPickersUtilsProvider>
    </ConnectedRouter>
    <ToastContainer position="bottom-center" autoClose={6000} hideProgressBar pauseOnHover />
  </Provider>
);

为什么这个方案更可靠？ #

1. 时机可控：通过useEffect监听认证状态/上下文，确保只有当依赖项就绪后才执行跳转，不会和认证流程抢资源。
2. 避免循环：加入了当前路径和目标路径的对比，防止不必要的重复推送。
3. 可维护性：把业务逻辑从路由工具中剥离，符合React的组件化思想，后续修改筛选参数逻辑更方便。

如果你的UserContext没有暴露认证状态，也可以直接监听localStorage.getItem("adal.idtoken")的变化，或者在UserContext的Provider内部完成跳转逻辑（本质和上面的方案一致）。

内容的提问来源于stack exchange，提问作者NullPointerException