不变违规：缩小反应错误＃200；答案

【问题标题】：Invariant Violation: Minified React error #200;不变违规：缩小反应错误＃200；
【发布时间】：2020-05-16 12:10:17
【问题描述】：

我们为侧边栏项目的路由实现了新的逻辑，之前所有项目都在同一级别，现在我们正在实现分层显示，页面可以组合成一个模块，当用户展开模块时，他会看到相关页面。

为此，我们的 JSON 结构也发生了变化，现在我们的路由逻辑实现如下 -

 <Switch>
                {
                    loginData.sideBarModules.map((route, index) =>

                        <Route key={index} path={route.redirectUrl} component={() =>
                            <FrontEnd host={route.host} name={route.moduleName} />} />
                    )
                }

以上代码用于为没有子页面的页面提供路由。

{
                    loginData.moduleList.map((route, index) => (
                        route.innerPages != undefined &&
                        route.innerPages.map((innerRoute, innerIndex) => (

                            <Route key={innerIndex} path={innerRoute.redirectUrl} component={() =>
                                <MicroFrontend host={innerRoute.host} name={innerRoute.moduleName} />} />
                        )
                        )))
                }

以上代码用于路由包含子页面的模块

以下代码与问题无关

                <Route exact path='/' component={() =>
                    <FrontEnd host='http://localhost:3001' name='Browse' />}
                />
                <Route path='/profile' component={() =>
                    <UserProfile />}
                />
                <Route path='/userpreference' component={() =>
                    <UserPreference getColor={props.getColor} />} />

                <Route component={ErrorPage} />
            </Switch>

进行这些更改后，我的应用程序有时会按预期工作，但有时会收到以下错误 -

react-dom.prod-16.8.6.min.js:12 Uncaught Invariant Violation: Minified React error #200;访问https://reactjs.org/docs/error-decoder.html?invariant=200 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。

我想知道问题是否出在代码中，为什么它有时会起作用？但是，如果我从 Switch 中删除所有内容，我的应用程序就会停止崩溃并完全正常工作。

【问题讨论】：

这个链接可能会有所帮助.. github.com/Automattic/liveblog/issues/353
@PALLAMOLLASAI - 我检查了讨论，它没有帮助我。
你能提供任何带有示例路由的stackblitz吗？？？？
@PALLAMOLLASAI - 如果我添加 JSON、写入导航逻辑的文件以及渲染路由组件的位置，您可以吗？
尝试删除或注释交换机内的每条路线，然后取消注释或逐行添加并检查您遇到错误的路线

标签： javascript reactjs

【解决方案1】：

由于几个问题，我能够找到问题的根本原因。当您得到最小化的错误时，最好使用 React 的 dev env 构建来获得完整的错误堆栈跟踪。

使用 -

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

【讨论】：