React Route: 使用 useHistory 实现编程式导航

最新推荐文章于 2024-04-09 21:04:58 发布

原创最新推荐文章于 2024-04-09 21:04:58 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #reactjs

本文介绍了在React应用中如何利用`useHistory` hook进行编程式导航。通过`useHistory`返回的对象，我们可以调用`push`和`replace`方法来改变浏览器URL，`push`会添加新的历史记录，允许用户通过后退按钮返回，而`replace`则替换当前历史记录，不允许返回。示例代码展示了如何在组件中使用`useHistory`来实现在新增引用后跳转到列表页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const history = useHistory();

useHistory() 返回一个对象，可以使用两种方法：push 和 replace 实现编程式导航，push 增加新页，可以使用后退按钮返回到旧的页面，使用 replace 则不能返回。

sample code：

import { useHistory } from "react-router-dom";
import QuoteForm from "./../components/quotes/QuoteForm";

const NewQuote = () => {
  const history = useHistory();
  const addQuoteHandler = (quoteData) => {
    console.log(quoteData);
    history.push("/quotes");
  };
  return <QuoteForm onAddQuote={addQuoteHandler} />;
};

export default NewQuote;