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

Question

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

<Link to=""> <Link />

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

可能是什么问题导致了这个问题？

尝试:

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

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

3. 不再需要历史记录

导出的组件:

     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

Answer 1

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

就您而言:

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