React-router-dom v6, URL changing but component doesn't render

Question

I've tried everything but fail to render component when URL changes. No error messages nothing, it renders Home component but when i click on (view and edit icon)Link it just changes url, component does not render nothing happens. I couldn't find a solution, is there any way to make it work?

App.js

import "./App.css";
// import { TextFilledComp } from './Components/TextFilledComp';
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 (
    <div>
      <Routes>
        <div>
          <div className="header-text">Todo List</div>
          <div className="box">
            <Route exact path="/" element={<Home />} />
            <Route path="/todo/:todoId" element={<SingleTodoPage />} />
            <Route path="/edit/:TodoId" element={<EditTodo />} />
          </div>
        </div>
      </Routes>
    </div>
  );
}

export default App;

Todo.js

import {
  Checkbox,
  List,
  ListItem,
  ListItemSecondaryAction,
  ListItemText,
  makeStyles
} from "@material-ui/core";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import CheckBoxIcon from "@material-ui/icons/CheckBox";
import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";

const useStyles = makeStyles({
  listRoot: {
    borderWidth: "1px",
    borderColor: "#aaaaaa",
    borderStyle: "solid",
    borderRadius: "20px"
  }
});

export const TodoList = () => {
  const todos = useSelector((state) => state.todo);
  const classes = useStyles();
  return (
    <div style={{ width: "95%", margin: "10px auto" }}>
      <List>
        {todos.map((todo) => (
          <ListItem key={todo.id} className={classes.listRoot}>
            <ListItemText primary={todo.name} />
            <ListItemSecondaryAction>
              {/* <Checkbox
                edge="end"
              /> */}
              <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>
    </div>
  );
};

codesandbox link for complete app

Answer 1

A Routes component is the replacement for Switch from v5 and should only wrap around Route components. It's solely responsible for matching the provided paths and controlling the visibility of Routes and does not know what to do with regular JSX.

function App() {
  return (
    <div>
      <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>
    </div>
  );
}

I've also removed the exact prop as it is deprecated in v6 since all Routes are exact by default. To allow non-exact Routes, use the new path="/nonexact/*" syntax. Some more info on the new features can be found here .