反应路由器 DOM 问题答案

【问题标题】：React Router DOM Issue反应路由器 DOM 问题
【发布时间】：2020-12-21 17:10:43
【问题描述】：

有没有人在 react-router-dom 上使用 tree-shaking 时遇到过这个错误？

这是我的代码

import React, { Component } from 'react'
import Link from 'react-router-dom/Link';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';

export class Navbar extends Component {
    render() {
        return (
            <AppBar>
                <Toolbar className="nav-container">
                    <Button color="inherit" component={Link} to={'/'}>Home</Button>
                    <Button color="inherit" component={Link} to={'/signup'}>Signup</Button>
                    <Button color="inherit" component={Link} to={'/login'}>Login</Button>
                </Toolbar>
            </AppBar>
        )
    }
}

我收到一个错误Warning: Please use `require("react-router-dom").Link` instead of `require("react-router-dom/Link")`. Support for the latter will be removed in the next major release.

这里是当前版本的网络应用依赖项。

{
    "@material-ui/core": "^4.11.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"
  }

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

正确的导入是

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

【讨论】：