如果当前页面是site.com/one
我正在点击 <Link to='/one'>One</Link>
,它会在每次点击时将新项目推送到历史记录(但位置不会改变)。如何防止这种情况?这真是愚蠢的行为。
最佳答案
issue #470 中也描述了此问题.将来可能会修复。同时,您可以使用自己的链接组件,当位置与当前位置匹配时执行 replaceState
:
link.js
import React from 'react';
import {Route, Link as ReactRouterLink} from 'react-router-dom';
import {createPath} from 'history';
const Link = ({to, replace, ...props}) => (
<Route path={typeof to === 'string' ? to : createPath(to)} exact>
{({match}) => (
<ReactRouterLink {...props} to={to} replace={replace || !!match} />
)}
</Route>
);
Link.propTypes = ReactRouterLink.propTypes;
Link.defaultProps = ReactRouterLink.defaultProps;
export default Link;
app.js
import Link from './link'; // use the custom Link component instead of the react-router Link
const App = () => {
<ul>
<li><Link to={{ pathname: '/one', search: 'foo=bar' }}>one</Link></li>
<li><Link to="/two">two</Link></li>
</ul>
}
该组件使用 Route
组件来检查当前位置是否与链接的 to
属性定义的位置匹配。如果匹配,链接将被渲染,replace
属性设置为 true
。这确保历史项目将被替换而不是添加。
其他一切都将与普通的 Link
组件一样工作。只需使用此组件代替原来的 Link
,它就会按您希望的方式工作。
工作示例:
关于javascript - 如果 react-router4 中的位置没有改变,如何防止 history.push?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51578815/