React 路由不渲染我的組件並給出 404 錯誤

Question

我一直在練習如何使用最新的模塊版本，所以我目前正在嘗試使用 react-router-dom。 它不會在確切的路徑上呈現頁面組件，而是在主頁上呈現。

我嘗試使用其他版本的 react-router-dom，但仍然得到相同的結果。

//App.js file
import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';

function App() {
    return (
        <Router>
            <div>
                <Route path="/shop" component={Shop}/> 
//doesn't render at localhost://8080/shop, but at localhost://8080, it renders the Shop page
                <Route path="/about" component={About}/>
            </div>
        </Router>


        )
}

export default App;

function Shop() {


        return (
            <div>
                <h3>
                    Shop
                </h3>
            </div>
        )

}

它應該呈現適當的組件，但給出 404 錯誤..我還發現通常有一個自動完成選項（在我以前的版本上嘗試 Route 時，它會用我的 IDE 顯示“組件，組件，路徑..”，但在這里它沒有顯示任何東西。是否有可能無法識別路線？

Answer 1

嘗試為您的路線添加“精確”道具。

<Route exact path="/shop" component={Shop}/> 

這是一個解釋。

Answer 2

關於在任何地方都沒有定義。 我完全運行了您的代碼，但在 About 頁面中包含了 function。 路由器為我工作。 主頁什么也沒有顯示，/shop 有商店的 h3 標簽，/about 有關於的 h3 標簽。

index.js 是否在調用應用程序？ 您對此進行了任何修改嗎？

Answer 3

function App() {
    return (
     <BrowserRouter>
        <Routes>
            <div>
                <Route path="/shop" element={<Shop/>}/> 
                <Route path="/about" element={<About/>}/>
            </div>
        </Routes>
    <BrowserRouter>
       )
}

• 用元素替換組件。
• 將 Shop 替換為 About to
• 在 return 語句中將所有代碼用 BrowserRouter 括起來。
• 這目前適用於 React Router v6
• 以下是更多信息的鏈接： https://reactrouter.com/en/v6.3.0/getting-started/tutorial