不變違規：縮小反應錯誤＃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 Uncaught Invariant Violation: Minified React error #200; 訪問https://reactjs.org/docs/error-decoder.html?invariant=200獲取完整消息，或使用非縮小開發環境獲取完整錯誤和其他有用的警告。

我想知道問題是否出在代碼中，為什么它有時會起作用？ 但是，如果我從 Switch 中刪除所有內容，我的應用程序就會停止崩潰並且完全可以正常工作。

Answer 1

由於幾個問題，我能夠找到問題的根本原因。 當你得到最小化的錯誤時，最好使用 React 的 dev env build 來獲得完整的錯誤堆棧跟蹤。

利用 -

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