如何修復 React Router v6 中的「錯誤：[PrivateRoute] 不是元件。其所有子元件必須是 a 或」？

錯誤：[PrivateRoute] 不是 ；成分。 的所有子元件必須是或

在 React Router v6 中，您可能會遇到錯誤，指出私有路由元件不是有效的路由元件。當您的私人路由元件未正確定義或配置時，就會發生這種情況。

要解決此問題，請按照以下步驟操作：

PrivateRoute 組件

確保您的 PrivateRoute 組件是有效的反應路線組件。在您的範例中，PrivateRoute 元件中存在語法錯誤：

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot;  />;

您應該將後面的/ 替換為=“/Home”帶雙右尖括號：

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot; ></Navigate>;

路由配置

在您的路由配置中，確保正確定義了私有路由。在您的範例中，您有：

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard/>}/>

這將不起作用，因為您在 element 屬性中缺少右尖括號。正確的程式碼是：

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard />} />

或者，您可以使用不同的方法來設定您的私有路由，例如使用條件渲染方法：

<Route exact path='/' element={<PrivateRoute/>}>
  <Route exact path='/' element={<Dashboard/>}/>
</Route>

在此範例中， PrivateRoute元件將根據身份驗證狀態決定是否渲染儀表板元件。

結論

透過確保您的 PrivateRoute 元件已正確定義且您的路由配置正確，您可以解決錯誤錯誤：[PrivateRoute] 不是 ；成分。 的所有子元件必須是或 .

以上是如何修復 React Router v6 中的「錯誤：[PrivateRoute] 不是元件。其所有子元件必須是 a 或」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！