反應路線問題（呈現空白頁面

Question

我正在嘗試使用 Route 呈現注冊組件，但它呈現的是一個空白頁面（id="root" 的 div 標簽是 emty

這就是我所做的：-這是包含注冊組件的注冊組件文件

- 這是沒有使用 React Route 的App 組件 沒有 React Route的 App 組件

- 這是它在瀏覽器中的樣子：渲染后的組件

但是在App組件中使用react Route之后： App component using React route

在 web 頁面中變成了這樣：寄存器和 Header 和頁腳組件不見了

Answer 1

您的 Route 應包含在 Switch 中。 您可以查看此示例https://v5.reactrouter.com/web/example/basic

Answer 2

而不是在你的路線中寫component={<Register/>}寫element={<Register/>} 。 此外，您需要將 Route 標簽包含在<Routes/>中。

Answer 3

你應該把你的代碼放在這里而不是圖像，這樣看起來會更清晰

但是根據我的檢查，如果您使用的是 Rou，您應該在App組件中執行此操作

<Routes>
<Route path = "yourpath" element = {<theComponentYouWant/>}>
</Routes>

Answer 4

您需要在 Switch 中使用 Route。 A 查看它的 children 並渲染第一個匹配當前 URL 的。

但最重要的是，您的代碼中缺少的是 url 的路徑。 如果您想顯示注冊類似localhost:3000/register的路徑，則路徑將類似於path="/register" 。 或者，如果您想在索引上顯示它，路徑將是path="/"示例可以像

 <Router> <div> <Switch> <Route path="/register"> <Register /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router>