导入使用 React-Router-Dom 的自定义模块组件时出现问题

Posted 2023-02-22

【中文标题】导入使用 React-Router-Dom 的自定义模块组件时出现问题

【英文标题】：Issues importing a custom module component that uses React-Router-Dom

【发布时间】：2019-10-26 00:35:25

【问题描述】：

尝试通过将导入的项目转换为节点模块从我的另一个项目中导入组件时，该组件显示为未定义。 这个组件使用了自己定义的 React-Router-Dom：

<Link to=""> <Link />

该组件随后被导入到具有自己的路由器的父项目中，但是在编译时，发现该组件未定义。

可能是什么问题导致了这种情况？

尝试：

从组件中移除所有 react-router-dom 导入，并将组件导出为纯 html 文件，从而成功导出组件。

从导出的组件中删除了路由器，只留下了 Link 包装器。

不再需要历史道具

导出的组件：

     export default function ExampleWrapper( history ) 
       return (
        <div>
           <Router>
            <div>
                <Link to="/example">
                    <button>Example</button>
                </Link>

                <Link to="/secondExample">
                    <button>secondExample</button>
                </Link>
            </div>

            <Fragment >
                <Switch >
                    <Route path="/example" exact component=Example />
                    <Route path="/secondExample" exact component=SecondExample />
                </Switch>
            </Fragment>
          </Router>
        </div>

在模块索引中暴露导入的索引：

export default Example;

export  SecondExample, ThirdExample, ExampleWrapper;

使用节点模块导出的组件：

import  ExampleWrapper  from 'create-react-library';

function App() 
    return (
        <div className="App">

            <ExampleWrapper history=history />

            <Router history=history>
                <Navbar />
                <header className="App-header">
                    <div className="columns is-marginless">
                       <Fragment>
                           <Switch>
                              <Route path="/admin/home" exact component=Home />
                           </Switch>
                        </Fragment>
                     </div>
                 </header>
             </Router>
         </div>
   );

错误代码：

Cannot read property 'dispose' of undefined
./node_modules/react-dev-utils/webpackHotDevClient.js
C:/Users/userName/DEV/concepts/admin-ui/node_modules/react-dev-utils/webpackHotDevClient.js:45

【参考方案1】：

您需要在父项目中编辑 webpack.config.js，添加子项目所需的依赖项。

在你的情况下：

  externals: (isEnvDemo || isEnvProduction)
  ? 
    react: 'react',
    'react-dom': 'react-dom',
    'react-router-dom': 'react-router-dom'
  

【参考方案2】：

可能是因为您使用的是默认导出，而在导入时使用的是命名导入。

当您导出默认值并想要导入时，请使用此语法

import TypeAnythingYouWantHere from 'xx/xx'

您可以输入任何您想参考的内容，因为它是默认导出，并且始终相同。

对于命名导出，您使用花括号

import  MustBeSameNameAsInExport, ... , ...  from 'xx/xx'

【讨论】：

与 react-router-dom 相关的组件是 ExampleWrapper，它作为命名导出导出并作为命名导入导出