我正在嘗試使用反應制作一個簡單的路由系統，但是當我單擊鏈接導航到另一個頁面時，它只會更改 URL 但不顯示內容，然后當我按 F5 時，它會顯示一切正常。
這是我的代碼，我不明白我做錯了什么，我也嘗試創建另一個應用程式，但結果是一樣的。
索引.js
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
應用程式.js
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Dashboard from "./pages/Dashboard/Dashboard";
import Notes from "./pages/Notes/Notes";
function App() {
return (
<Router>
<Switch>
<Route path="/" component={Dashboard} exact />
<Route path="/notes" component={Notes} />
</Switch>
</Router>
);
}
export default App;
儀表盤
import PageContent from "../../components/PageContent/PageContent";
import ResponsiveDrawer from "../../components/ResponsiveDrawer/ResponsiveDrawer";
import { Link } from "react-router-dom";
const Dashboard = () => {
return (
<>
<ResponsiveDrawer>
<PageContent
header={
<div className={`flex-row`}>
<h1
className={`font-extrabold tracking-tight truncate capitalize`}
>
dashboard
</h1>
</div>
}
body={<>Bentornato utente!</>}
></PageContent>
</ResponsiveDrawer>
</>
);
};
export default Dashboard;
uj5u.com熱心網友回復：
使用版本 6。
在您的代碼中匯入
Routes而不是Switch替換。<Switch>使用
element代替組件，并添加實際組件作為其值而不僅僅是名稱。您可能應該
Notes先移動路線，因為我認為排序有影響。
<Router>
<Routes>
<Route path="/notes" element={<Notes />} />
<Route path="/" element={<Dashboard />} exact />
</Routes>
</Router>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/474746.html
標籤：javascript 反应 反应路由器dom