如何使用带有react-redux的react-router-dom v6.0.0渲染不同的组件

我试图通过单击链接来呈现不同的组件，但是问题是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
);

然后是App.js来呈现组件

import "./App.css";
import { Routes, Route } from "react-router-dom";
import { SingleTodoPage } from "./Components/SingleTodoPage";
import { EditTodo } from "./Components/EditTodo";
import { Home } from "./Components/Home";

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>
  );
}

export default App;

SingleTodo，用于链接不同的组件

<SingleTodo />

<List>
        {todos.map((todo) => (
          <ListItem key={todo.id} className={classes.listRoot}>
            <ListItemText primary={todo.name} />
            <ListItemSecondaryAction>
              <CheckBoxIcon color="primary" />
              <DeleteIcon color="secondary" />
              <Link to={`edit/${todo.id}`} className="button">
                <EditIcon />
              </Link>
              <Link to={`todo/${todo.id}`}>view</Link>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
      </List>

codesandbox更多的细节，我使用useParams钩SingleTodo和EditTodo获得动态网址参数。请如果有人知道如何解决这个问题，请帮助我...谢谢