Javascript 反应路由器dom v6，URL更改，但组件不'；不渲染

我尝试了所有方法，但在URL更改时无法呈现组件。并没有错误消息什么都并没有，它呈现主组件，但当我点击（查看和编辑图标）链接时，它只是改变了url，组件并没有呈现，什么都并没有发生。我找不到解决办法，有没有办法让它工作

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;

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

导入“/App.css”； //从“./Components/TextFilledComp”导入{TextFilledComp}； 从“react router dom”导入{Routes，Route}； 从“/Components/singletodpage”导入{singletodpage}； 从“/Components/editto”导入{EditTodo}； 从“/Components/Home”导入{Home}； 函数App（）{ 返回( 事項清單 ); } 导出默认应用程序； Todo.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;

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

导入{
复选框，
列表
列表项，
ListItemSecondaryAction，
ListItemText，
制作风格
}来自“@材料界面/核心”；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/icons/Edit”导入编辑图标；
从“@material ui/icons/CheckBox”导入复选框图标；
从“React”导入React；
从“react redux”导入{useSelector}；
从“react router dom”导入{Link}；
const useStyles=makeStyles({
listRoot：{
边框宽度：“1px”，
边框颜色：“AAAAA”，
边框样式：“实心”，
边界半径：“20px”
}
});
导出常量TodoList=（）=>{
const todos=useSelector（（state）=>state.todo）；
const classes=useStyles（）；
返回(
{todo.map（（todo）=>(
{/*  */}
看法
))}
);
};

---

完整应用程序的链接A

Routes

组件是v5版的

Switch

的替代品，应该只环绕

Route

组件。它只负责匹配提供的路径和控制路由的可见性，不知道如何处理常规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>
  );
}

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

---

我还删除了

exact

prop，因为它在v6中被弃用，因为默认情况下所有路由都是exact的。要允许非精确路由，请使用新的

path=“/nonexact/*”

语法。可以找到更多关于新功能的信息。

我遵循完全相同的方法，你可以看到我不理解你的评论。将上面的内容完全粘贴到您的代码沙盒中，它就可以工作了。您的

Routes

组件错误地包装了示例中的一些

div

元素。还要注意的是，您在沙盒中错误地将

path=“/edit/：TodoId”

的id大写。它在react router dom 5.1.2中工作，但现在我正在移动到v6，它现在不工作，我已经更正了拼写，更新了codesandbox