Question

我已经尝试了所有方法，但在 URL 更改时无法呈现组件。没有任何错误消息，它会呈现 Home 组件，但是当我单击（查看和编辑图标）链接时，它只会更改 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;

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 完整应用链接

Answer 1

Routes 组件是 v5 中 Switch 的替代品，并且应该只环绕 Route 组件。它全权负责匹配提供的路径并控制 Routes 的可见性，不知道如何处理常规 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 属性，因为它在 v6 中已被弃用，因为默认情况下所有路由都是精确的。要允许非精确路由，请使用新的 path="/nonexact/*" 语法。可以在 here 中找到有关新功能的更多信息。

React-router-dom v6，URL 更改但组件不呈现

1 个答案: