React Router Link 不会在自定义历史记录中保留状态 系统：

问题描述

在我的项目中，我使用 React Router DOM 5.2.0。由于项目需要，我必须将 <Router /> 与自定义历史一起使用。事情是这样的：

Example on Sandbox

history.js

import { createbrowserHistory } from 'history';

const history = createbrowserHistory();

export default history;

useRouter.js

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,history]);
};

export default useRouter;

AppRoutes.jsx

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;

App.jsx

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;

这里的关键部分是 Link 组件，它具有 to 属性，以对象为值。在这个对象中，我定义了 state: { prevUrl: location.pathname }，但是当我尝试在 state 中访问它时，这个 null 总是 Page2。这里有趣的是，如果我将 <Router /> 更改为 browserRouter 并从 location 中删除自定义 Switch - 事情运行得很好，这意味着 <Link /> 确实传播状态。但是，就我而言，history 似乎根本没有处理状态。

系统：

• Mac OS 11.4 Big Sur
• 节点 12.16.2
• NPM 6.14.11
• 反应 16.13.1
• react-router-dom 5.2.0

解决方法

感谢这篇文章，我刚刚找到了答案https://stackoverflow.com/a/62583930/8080990

降级到 history 版本 4，完美运行！

Sandbox