我試圖完成本教程，確保蓋茨比有了Auth0，但打了一個路障，由于REACH /路由器不被兼容反應17位谷歌搜索周圍后，我發現這個問題哪個路由器專案中使用前進具有遷移指南：從 Reach 遷移到 React Router
但是，作為初學者，我還不夠精通，無法理解其中包含的內容。
教程中的源代碼如下：
import React from "react"
import { Router } from "@reach/router"
import { Link } from "gatsby"
const Home = () => <p>Home</p>
const Settings = () => <p>Settings</p>
const Billing = () => <p>Billing</p>
const Account = () => (
<>
<nav>
<Link to="/account">Home</Link>{" "}
<Link to="/account/settings">Settings</Link>{" "}
<Link to="/account/billing">Billing</Link>{" "}
</nav>
<Router>
<Home path="/account" />
<Settings path="/account/settings" />
<Billing path="/account/billing" />
</Router>
</>
)
export default Account
從遷移指南更新路由器到路由，我已將其更改為：
import React from "react"
import { Link } from "gatsby"
import { Routes } from "react-router-dom";
const Home = () => <p>Home</p>
const Settings = () => <p>Settings</p>
const Billing = () => <p>Billing</p>
const Account = () => (
<>
<nav>
<Link to="/account">Home</Link>{" "}
<Link to="/account/settings">Settings</Link>{" "}
<Link to="/account/billing">Billing</Link>{" "}
</nav>
<Routes>
<Home path="/account" />
<Settings path="/account/settings" />
<Billing path="/account/billing" />
</Routes>
</>
)
export default Account
所以本質上，用Routes代替Router。現在編譯成功，但在運行時失敗并出現以下錯誤：
[主頁] 不是
<Route>組件。的所有子組件<Routes>必須是一個<Route>或<React.Fragment>
因此，主頁、設定和賬單被視為不是<Route\>或<React.Fragment\>
這是一個簡單的例子，適合精通 react-router 的人。我只是在學習這些東西，所以有一些困難。我已經要求 auth0 更新本教程，但不知道何時會采取行動，如果有的話。
uj5u.com熱心網友回復：
該Routes組件僅替換v5 中的Switch組件react-router-dom，但需要將Routev6 中的組件包裝起來。路由組件Home等...需要由Route.
import React from "react"
import { Link } from "gatsby"
import { Routes } from "react-router-dom";
const Home = () => <p>Home</p>
const Settings = () => <p>Settings</p>
const Billing = () => <p>Billing</p>
const Account = () => (
<>
<nav>
<Link to="/account">Home</Link>{" "}
<Link to="/account/settings">Settings</Link>{" "}
<Link to="/account/billing">Billing</Link>{" "}
</nav>
<Routes>
<Route path="/account" element={<Home />} />
<Route path="/account/settings" element={<Settings />} />
<Route path="/account/billing" element={<Billing />} />
</Routes>
</>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380161.html