不变冲突:缩小的反应错误# 200；

Question

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

为此，我们的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未捕获的不变违例:缩小的React错误# 200；访问https://reactjs.org/docs/error-decoder.html?invariant=200获得完整的消息，或者使用非精简的开发环境获得完整的错误和其他有用的警告。

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

Answer 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>