如果当前页面为site.com/one
,而我单击的是<Link to='/one'>One</Link>
,则每次单击都会将新项目推入历史记录(但位置不会改变)。如何预防呢?这真是愚蠢的行为。
答案 0 :(得分:1)
issue #470中也描述了此问题。将来可能会修复。同时,您可以使用自己的链接组件,当位置与当前位置匹配时,它会执行true
:
link.js
replaceState
app.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;
该组件使用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
,它就会按照您想要的方式工作。
工作示例: