如何使用 react-router-dom v6 中的历史对象重定向到特定页面

Posted 2023-02-19

【中文标题】如何使用 react-router-dom v6 中的历史对象重定向到特定页面

【英文标题】：how to redirect to partical page using history object in react-router-dom v6

【发布时间】：2022-01-22 08:52:57

【问题描述】：

我正在使用“react-router-dom”v6。当我尝试使用历史对象重定向到另一个页面时，出现以下错误：

Cannot read properties of undefined (reading 'push')

这是我的代码：

const Search = ( history ) => 
  const [keyword, setKeyword] = useState("");

  const searchSubmitHandler = (e) => 
    e.preventDefault();
    if (keyword.trim()) 
      history.push(`/products/$keyword`);
     else 
      history.push("/products");
    
  ;


function App() 
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route exact path="/" element=<Home /> />
          <Route exact path="/product/:id" element=<ProductDetails /> />
          <Route exact path="/products" element=<Products /> />

          <Route exact path="/search" element=<Search /> />
        </Routes>
        <Footer />
      </div>
    </Router>
  );

【参考方案1】：

history 对象在 react-router-dom 版本 6 中被 navigate 函数替换，通过 useNavigate 挂钩访问。

import  useNavigate  from 'react-router-dom';

const Search = () => 
  const navigate = useNavigate();
  const [keyword, setKeyword] = useState("");

  const searchSubmitHandler = (e) => 
    e.preventDefault();
    navigate(keyword.trim() ? `/products/$keyword` : "/products");
  ;
;