如果react-router4中的位置不变,如何防止history.push?

时间:2018-07-29 09:05:56

标签: javascript reactjs react-router

如果当前页面为site.com/one,而我单击的是<Link to='/one'>One</Link>,则每次单击都会将新项目推入历史记录(但位置不会改变)。如何预防呢?这真是愚蠢的行为。

1 个答案:

答案 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,它就会按照您想要的方式工作。

工作示例:

Edit y38j6637k1