React Router Dom - React Router 更改 url 但页面不更改

Question

我正在尝试使用 React 创建一个简单的路由系统，但是当我单击 link 导航到另一个页面时，它只是更改了 URL 但没有显示内容，然后当我按 F5 时，它显示一切正常。

这是我的代码，我不明白我做错了什么，我也尝试创建另一个应用程序，但结果是一样的。

Index.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>
);

App.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;

Answer 1

Using version 6.

导入 Routes 而不是 Switch 并替换代码中的 <Switch>。
使用 element 代替组件，并添加实际组件作为其值，而不仅仅是名称。
你应该先移动 Notes 路线，因为我认为顺序有影响。

<Router>
  <Routes>
    <Route path="/notes" element={<Notes />} />
    <Route path="/" element={<Dashboard />} exact />
  </Routes>
</Router>

React Router Dom - React Router 更改 url 但页面不更改

React Router Dom - React Router changing url but not page

javascript

reactjs

react-router-dom