根据先前选择的过滤器从本地存储推送历史 [英] pushing history according to previously selected filters from localstorage

问题描述

因为我是新手，所以我正在尝试根据存储在本地存储中的以前选择的筛选器正确地实现路由，然后在应用程序启动时将它们推送到历史记录(带有超时)。

如果没有超时，应用程序会在获取用户上下文/令牌身份验证之间来回切换

http://localhost:3000/#tokenid=123456789012345678901234567890

和我要路由到的实际URL：

http://localhost:3000/monthly?date=1629361313861&dispatcher=Srv+DE+01

由于我不知道这是不是正确的方法，而且由于UserContext尚未建立，所以它会跳来跳去，因此我将非常感谢对我遇到的这个问题的任何建议。

App.tsx

import React from 'react';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { Switch, Route } from 'react-router-dom';
import { CssBaseline } from '@material-ui/core';
import { ToastContainer } from 'react-toastify';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import 'react-toastify/dist/ReactToastify.css';

import store from './services';
import history from './utils/history';
import './i18n';

import UserContext from './modules/UserContext';
import FactBox from './modules/FactBox';
import ModalRoot from './components/ModalRoot';
import pathsConst from './const/paths';
import DailyView from './pages/DailyView';
import WeeklyView from './pages/WeeklyView';
import MonthlyView from './pages/MonthlyView';
import NotFound from './pages/404';

const App = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <CssBaseline />
        <UserContext>
          <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>
);

export default App;

Reducer.ts

import { combineReducers } from 'redux';
import { connectRouter as router } from 'connected-react-router';

import history from '../utils/history';
import loading from './loading/reducer';
import modal from './modal/reducer';
import resources from './resources/reducer';
import departments from './departments/reducer';
import dispatchers from './dispatchers/reducer';
import projects from './projects/reducer';
import events from './events/reducer';
import uiSettings from './uiSettings/reducer';
import userContext from './userContext/reducer';
import holidays from './holidays/reducer';

const rootReducer = combineReducers({
  router: router(history),
  loading,
  modal,
  resources,
  departments,
  dispatchers,
  projects,
  events,
  uiSettings,
  userContext,
  holidays,
});

export default rootReducer;

/utils/history.ts

import { createBrowserHistory } from 'history';
import pathsConst from '../const/paths';

function getHistory () {
  let history = createBrowserHistory({
    basename: process.env.PUBLIC_URL,
  });
  let lastPath = '/';
  let lastQueryString = localStorage.getItem("lastQueryString");
  let lastPathTemp = localStorage.getItem("lastPath");
  let lastURL = localStorage.getItem("lastURL");
  let adalID = localStorage.getItem("adal.idtoken");
  if ( lastPathTemp !== null ) {
    if (lastPathTemp.includes('weekly')=== true) {
      lastPath = pathsConst.WEEKLY_VIEW;
    }
    else if (lastPathTemp.includes('monthly')=== true) {
      lastPath = pathsConst.MONTHLY_VIEW;
    }
    else {
      lastPath = pathsConst.INDEX;
    }
  } 

  // DBG: 
  console.log('DBG - LAST QUERY STRING:', lastQueryString);
  console.log('DBG - LAST URL:', lastURL);

  if ( lastQueryString !== null && lastPath !== null && adalID !== null  ) { 

    let lastQueryStringEdit = "?date=" + Date.now();
    // INFO: Check for additional query params
    if (lastQueryString.indexOf("&") !== -1) {
      let pos1 = lastQueryString.indexOf("&");
      let substr = lastQueryString.substring(pos1, lastQueryString.length);
      lastQueryStringEdit = "?date=" + Date.now() + substr;
    } 

      setTimeout(function() {
      console.log('DBG - PUSHING.............................');
      history.push({
      pathname: lastPath,
      search: lastQueryStringEdit
      });
      }, 2000);

    return history;

  }
  else { // INFO: Return as is

    return history;

  }
}

const history  = getHistory();

export default history;

推荐答案

这是我访问URL属性的方法

//for accessing path of url
const {pathname} = useLocation();

...

//for going back to the last used url
const navigate = useNavigate(); //react router v6
navigate(-1) // to go back to last used url
navigate(-2) // go back to second last used url
navigate(-3) // so on ...

. 为了在url中搜索特定的参数，我制作了一个定制钩子，如下所示，并传入我想要获取的值所需的变量名

import { useLocation } from "react-router-dom";

export default function useGetParameter(name: string) {
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  return query.get(name);
}
//this custom hook return the required param in url or null if it does not exist

推荐

我建议不要以这种方式将值存储在本地存储中，因为本地存储值不会过期，您必须显式地将它们从浏览器中删除。使用带有例如(useState、this.State、useContext、Redux等)的会话存储来存储和访问变量属性。但是，如果在任何情况下，您仍然希望将本地存储上的数据保存更长一段时间，那么我建议您使用其他库来完成这项工作。好处是，这些库被配置为更具约束性，并为您提供逻辑分离。请务必查看redux persist

这篇关于根据先前选择的过滤器从本地存储推送历史的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！