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

lawrence-witt · Accepted Answer · 2021-02-10 21:08:22Z

3

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.

answered Feb 10, 2021 at 21:08

lawrence-witt

9,5023 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sultan Over a year ago

i am following the exact same method, you can see that too

lawrence-witt Over a year ago

I don't understand your comment. Paste in exactly the above into your codesandbox and it works. Your Routes component is incorrectly wrapping some div elements in your example. Also be aware that you have incorrectly capitalised the id of path="/edit/:TodoId" in your sandbox.

sultan Over a year ago

it was working with react-router-dom 5.1.2 but now i am moving to v6 and it is not working now, i have correct the spelling too

sultan Over a year ago

link updated codesandbox

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related