Javascript 如何使用react router dom v6.0.0和react redux呈现不同的组件

我试图通过点击一个链接来呈现不同的组件，但问题是url更新，ui保持不变，每次我点击不同的项目来呈现，但同样的事情发生了，我尝试了很多来修复它，但我找不到解决方案

从index.js开始作为入口点

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import store from "./Components/store";
import { Provider } from "react-redux";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </StrictMode>,
  rootElement
);

从“react”导入{StrictMode}；
从“react dom”导入react dom；
从“/Components/store”导入存储；
从“react redux”导入{Provider}；
导入“/index.css”；
从“react router dom”导入{BrowserRouter}；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
有关详细信息，我正在使用useParams钩住SingleTodo和editodo
获取动态url参数。
如果有人知道如何解决此问题，请帮助我…谢谢
将非路由相关元素移出
路由
组件

function App() {
  return (
    <Routes>
      <div>
        <div className="header-text">Todo List</div>
        <div className="box">
          <Route path="/" element={<Home />} />
          <Route path="todo/:todoId" element={<SingleTodoPage />} />
          <Route path="edit/:todoId" element={<EditTodo />} />
        </div>
      </div>
    </Routes>
  );
}

函数应用程序（）{
返回(
事項清單
);
}

对此

function App() {
  return (
    <div>
      <div className="header-text">Todo List</div>
      <div className="box">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="todo/:todoId" element={<SingleTodoPage />} />
          <Route path="edit/:todoId" element={<EditTodo />} />
        </Routes>
      </div>
    </div>
  );
}

函数应用程序（）{
返回(
事項清單
);
}

路由
组件主要作为react路由器domv4/5的
交换机
组件的替代品

function App() {
  return (
    <Routes>
      <div>
        <div className="header-text">Todo List</div>
        <div className="box">
          <Route path="/" element={<Home />} />
          <Route path="todo/:todoId" element={<SingleTodoPage />} />
          <Route path="edit/:todoId" element={<EditTodo />} />
        </div>
      </div>
    </Routes>
  );
}

function App() {
  return (
    <div>
      <div className="header-text">Todo List</div>
      <div className="box">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="todo/:todoId" element={<SingleTodoPage />} />
          <Route path="edit/:todoId" element={<EditTodo />} />
        </Routes>
      </div>
    </div>
  );
}