Question

我有以下代码：

import { Link } from 'react-router-dom';

import DetailsOneIcon from '@material-ui/icons/ListAlt';
import DetailsTwoIcon from '@material-ui/icons/PlaylistAddCheck';

const OrderItemActions = ({ order, classes }) => {
    return (
        <div>
            <Tooltip title="Details 1 page">
                <IconButton aria-label="My details">
                    <Link to={`/orders/${order.orderReference}/details1`}>
                        <DetailsOneIcon />
                    </Link>
                </IconButton>
            </Tooltip>
            <Tooltip title="Details 2 page">
                <IconButton aria-label="My details 2">
                    <Link to={`/orders/${order.orderReference}/detail2`}>
                        <DetailsTwoIcon />
                    </Link>
                </IconButton>
            </Tooltip>
        </div>
    );
}

const mapStateToProps = (state) => {
    const getWarehouseOrder = warehouseOrder();

    return (state, { order }) => getWarehouseOrder(state, order.orderReference);
}

export default connect(mapStateToProps)(withStyles(styles)(OrderItemActions));

我正在使用以下版本：

"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",

如主题所述，这在IE11上不起作用，在Edge，Chrome和Firefox上起作用。

如果我在F12控制台上检查网络呼叫，则根本看不到任何动静。因此甚至根本不会在IE11上尝试进行底层url调用。

IE的使用正在逐渐消失，但是目前我仍然对支持IE和Edge有正式的要求。所以我需要解决这个问题。

有指针吗？

更新

如果导致这种情况，这是IconButton引起的：

<IconButton aria-label="My details">

单击按钮可以正常工作。

PS：这是我先前的问题的后续报道：

What's the proper way to link to a route with parameters?

Answer 1

React.js只是现代的javascript代码，如果正确配置babel，就可以解决您的问题尝试将.babelrc更改为11

{
  "presets" : [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
    "react",
  ]
}

Reactjs Link在IE11上不起作用，但在Edge和其他浏览器上起作用

1 个答案: