代码适用于 react-router-dom 4.3.1 但不适用于 5.2.0

Question

tl;dr：下面的代码不适用于 react-router-dom 的 5.2.0 版本，但适用于 4.3.1

上下文：我正在使用 CodeSandBox 在线修补一些客户端路由代码，特别是利用 react-router-dom 模块。以下是应用程序的一些相关片段：

index.js

import React from "react";
import ReactDOM from "react-dom";

import { Link, BrowserRouter } from "react-router-dom";
import StyledMenuItem from "./StyledMenuItem";

function App() {
  return (
    <React.Fragment>
      <StyledMenuItem component={Link} to={"/hello"}>
        <span>Hello Link</span>
      </StyledMenuItem>

      <br />
      <br />

      <Link to={"/world"}>World Link</Link>
    </React.Fragment>
  );
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector("#app")
);

StyledMenuItem.jsx

import React, { Component } from "react";
export default class StyledMenuItem extends Component {
  render() {
    let WrapperComponent = this.props.component;
    if (WrapperComponent === undefined) {
      WrapperComponent = React.Fragment;
    }

    return (
      <WrapperComponent {...this.props}>{this.props.children}</WrapperComponent>
    );
  }
}

基本上，我是在修补并试图模仿 Material-UI 的 MenuItem API 的 component 道具的行为.

让我感到困惑的问题：to '/hello' 的 Link 在 CodeSandBox 上不起作用，但 它在我的本地环境中起作用。我对 react & react-dom 的相同版本使用完全相同的代码，即 16.13.1.

根据我的调查：我的本地环境 react-router-dom 没有更新。在 CodeSandBox 上，我使用的是 react-router-dom 5.2.0;在我的本地环境中，我使用 react-router-dom 4.3.1

为此，回到 CodeSandBox 我尝试在不同版本上测试它（CodeSandBox 有一个很酷的功能，可以让您更改包版本）。

我已经在两个版本上进行了测试，我可以确认这个问题肯定与我的软件包版本有关。

现在，我的问题是：react-router-dom 5.2.0 包的代码更改是什么停止支持我正在 react-router-dom 4.3.1 上运行的代码？

Answer 1

你可以很容易地比较源代码，但只要快速浏览一下你的代码，我猜这与你传递给 Link 的额外道具有关。如果你从 props 中解构 component 那么它似乎可以在你的沙箱中工作。

import React, { Component } from "react";

export default class StyledMenuItem extends Component {
  render() {
    const { component, ...rest } = this.props; // <-- destructure and pass on the rest

    let WrapperComponent = component;
    if (WrapperComponent === undefined) {
      WrapperComponent = React.Fragment;
    }

    return <WrapperComponent {...rest}>{this.props.children}</WrapperComponent>;
  }
}

代码适用于 react-router-dom 4.3.1 但不适用于 5.2.0

Code works on react-router-dom 4.3.1 but not on 5.2.0

javascript

reactjs

react-router

react-router-v4

react-router-dom