how to render different components using react-router-dom v6.0.0 with react-redux

Question

i am trying to render different components by clicking on a link but the problem is the url updates and the ui remains same unchanged, everytime i click on different item to render but the same thing happens, i tried a lot to fix it but i can not find a solution for this.

starting from index.js as entry point

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

then App.js to render components

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 where linking different components

<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 for more details, i am using useParams hook in SingleTodo and in EditTodo to get dynamic url params. please if anyone knows how to solve this please help me...thanks

Answer 1

Move the non-routing-related elements out of the Routes component.

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

To this

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

The Routes component functions largely as the replacement for react-router-dom v4/5's Switch component.