React路由器链接不会在自定义历史记录中保留状态

Question

在我的项目中，我使用React路由器DOM 5.2.0。我必须使用

沙盒上的例子

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

js prettyprint-override">import {
  useParams,
  useRouteMatch,
} from 'react-router-dom';
import { useMemo } from 'react';

import history from './history';
import urlQueriesService from './urlQueriesService';

const useRouter = () => {
  const params = useParams();
  const match = useRouteMatch();
  const { location } = history;

  return useMemo(() => ({
    push: history.push,
    replace: history.replace,
    pathname: location?.pathname,

    query: {
      ...urlQueriesService.parse(location?.search),
      ...params,
    },

    match,
    location,
    history,
  }), [params, match, location, history]);
};

export default useRouter;

import React from 'react';
import {
  Route,
  Switch,
} from 'react-router-dom';

import useRouter from './useRouter';
import TestPage from './TestPage';
import TestComponent from './TestComponent';

const AppRoutes = () => {
  const { location } = useRouter();
  return (
    <Switch location={location}>
      <Route exact path="/page-1" component={Page1} />
      <Route exact path="/page-2" component={Page2} />
    </Switch>
  );
};

export default AppRoutes;

import history from './history';

<Router history={history}>
  <AppRoutes />
</Router>

这是基本设置Page1和Page2是交叉链接组件，如下所示：

import React from 'react';
import { Link } from 'react-router-dom';

import useRouter from './useRouter';

const Page1 = () => {
  const { location } = useRouter();

  return (
    <div>
      <h1>Test</h1>

      <div>
        <Link to={{ pathname: '/page-2', state: { prevUrl: location.pathname }}}>Stateful component</Link>
      </div>
    </div>
  );
};

export default Page1;

这里的关键部分是链接组件，它具有到属性，对象作为值。在这个对象中，我定义了状态：{prevUrl:location.pathname}，但是当我试图在Page2中访问它时，这个状态总是null。有趣的是，如果我改变

• Mac OS 11.4大苏尔
• 节点12.16.2
• NPM 6.14.11
• 反应16.13.1
• 反应路由器dom 5.2.0




Answer 1

多亏了这篇文章，我才找到了答案https://stackoverflow.com/a/62583930/8080990

降级到historyversion4，它就完美了！

沙盒