react项目中使用Link遇到的问题

link路由跳转的遇到的问题：

          1: 使用query,data等进行传值，可以在另一个页面拿到值，但是to的跳转不起作用

                       解决： 1.去掉link,加点击函数，使用this.props.history.push('./xxxxx')，参数有 to,query,data等。

                                   2.使用link to，在url进行传值

          2 : 在eslint下，link to 一直报错，[eslint] The href attribute is required on an anchor. Provide a valid, navigable address as    the href value. (jsx-a11y/anchor-is-valid)

                      解决： 1.添加href =' ../xxxxxx' ,也就是和to的值一样

                                  2.或者建议直接使用this.props.history.push('./xxxxx');

再用代码来说明一下：

onClick={() => {
                    
        this.props.history.push(`/xxx/Info?xxxId=${item.xxxId}`);
}}

需要引入类型校验

import PropTypes from 'prop-types';

然后对history进行校验

history:PropTypes.shape({
    push: PropTypes.func.isRequired
}).isRequired

在另一个页面拿值的时候，需要访问this.props.location.search取得url上的值

this.props.location.search

总结：

如果是用跳转来达到传递信息，可以使用state来保存。

例如在A中做跳转：

jumpNextLink(link) {
    const { history } = this.props;
    histroy.push({ pathname: link, state: { ...whatever } });
}

在下个组件的location中的state就可以收到，而且它不会出现在地址栏里。