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

凯文·曼

在尝试通过将导入的项目转换为节点模块从我的另一个项目中导入组件时,该组件显示为未定义。此组件使用具有自己定义的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
纳尔逊·拉里奥斯(Nelson Larios)

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

在您的情况下:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

导入自定义颜色表文件时出现问题

React-router-dom不呈现在交换机中的自定义组件之后定义的路由

在 react-router 中使用 history.push() 传递道具时出现问题

使用自定义字体时出现问题-“无法制作本机字体”

使用自定义维度重新排序Collection View单元时出现问题

使用模板自定义剑道树视图时出现问题

Phoenix-使用两个自定义主键获取模型时出现问题

使用Directshow自定义过滤器时出现问题

使用React Router和导入其他组件的外部组件时出现错误“ React.createElement:类型无效-预期为字符串”

react-router-dom从具有自定义组件和额外路径的路由获取ID

使用vscode 1.28时自动导入React组件出现问题

使用 React 的天气应用程序:将自定义纬度/经度输入 API 请求时出现问题

尝试导入错误:“ BrowseRouter”未从“ react-router-dom”导出(导入为“ Router”)

因此,react-router-dom出现问题:“检查“ Header”的渲染方法”

使用 React Router 嵌套组件

在React-Router 2.0.0中使用自定义历史记录的问题

使用react-native-router-flux自定义navBar

导入组件时出现问题

如何测试使用Jest导入自定义本机模块的React Native组件?

React Native-使用我制作的自定义组件时出现错误(错误:undefined无法解析模块<MyModule>)

React Native-导入自定义组件时出现导航错误

无法在 Gulp 项目中导入 React Router Dom

尝试导入错误:“出口”未从“react-router-dom”导出

尝试导入错误:未从“ react-router-dom”导出“ useRouteMatch”

尝试导入错误:未从“ react-router-dom”导出“ PrivateRoute”

尝试导入错误:未从“ react-router-dom”导出“ useHistory”

ReactJS 无法再导入“react-router-dom”

尝试导入错误:“路由”未从“react-router-dom”导出

React.js:将<input type =“ file”>转换为自定义按钮图标时出现问题