javascript - 如果 react-router4 中的位置没有改变，如何防止 history.push？

Question

如果当前页面是site.com/one我正在点击 <Link to='/one'>One</Link> ，它会在每次点击时将新项目推送到历史记录(但位置不会改变)。如何防止这种情况？这真是愚蠢的行为。

Answer 1

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，它就会按您希望的方式工作。

工作示例: