(0, _reactRouterDom.useHistory) 不是一个函数

Question

我正在使用react-router-dom v6.0.0-beta.0和reac-redux 7.2.2，并想通过使用useState钩子来编辑状态值，但是当我单击EditIcon时，它给了我这个错误......

(0, _reactRouterDom.useHistory) 不是一个函数

EditTodo.js

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useHistory } from "react-router-dom";
import { useParams } from "react-router-dom";

import { todoUpdated } from "./TodoSlice";

export const EditTodo = () => {
  const { todoId } = useParams();

  const todo = useSelector((state) =>
    state.todo.find((todo) => todo.id === todoId)
  );

  const [name, setName] = useState();
  const [description, setDescription] = useState();

  const dispatch = useDispatch();
  const history = useHistory();

  const onTitleChanged = (e) => setName(e.target.value);
  const onContentChanged = (e) => setDescription(e.target.value);

  const onSavePostClicked = () => {
    if (name && description) {
      dispatch(todoUpdated({ id: todoId, name, description }));
      history.push(`/todo/${todoId}`);
    }
  };

  return todo ? (
    <section>
      <h2>Edit Post</h2>
      <form>
        <label htmlFor="postTitle">Post Title:</label>
        <input
          type="text"
          id="postTitle"
          name="postTitle"
          placeholder="What's on your mind?"
          value={name}
          onChange={onTitleChanged}
        />
        <label htmlFor="postContent">Content:</label>
        <textarea
          id="postContent"
          name="postContent"
          value={description}
          onChange={onContentChanged}
        />
      </form>
      <button type="button" onClick={onSavePostClicked}>
        Save Post
      </button>
    </section>
  ) : null;
};

如何解决这个问题？如果有人知道帮我解决这个问题。谢谢，这是codesandbox

Answer 1

您正在使用react-router-dom的测试版。在 v6 中，useHistory被替换为useNavigate

https://dev.to/zenveus/routing-with-react-router-v6-6b1

如果您想使用 useHistory 您应该安装 v5。

const navigate = useNavigate();

const onSavePostClicked = () => {
  if (name && description) {
    dispatch(todoUpdated({ id: todoId, name, description }));
    navigate(`/todo/${todoId}`);
  }
};