如何解决React Router Link 不会在自定义历史记录中保留状态 系统:
在我的项目中,我使用 React Router DOM 5.2.0。由于项目需要,我必须将 <Router />
与自定义历史一起使用。事情是这样的:
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
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。