解決React報錯useNavigate()?may?be?used?only?in?context?of?Router

更新時間：2022年12月02日 16:53:09 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了解決React報錯useNavigate()?may?be?used?only?in?context?of?Router，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

當我們嘗試在react router的Router上下文外部使用useNavigate 鉤子時，會產(chǎn)生"useNavigate() may be used only in the context of a Router component"警告。為了解決該問題，只在Router上下文中使用useNavigate 鉤子。

下面是一個在index.js文件中將React應(yīng)用包裹到Router中的例子。

// index.js
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
// ??? wrap App in Router
root.render(
  <Router>
    <App />
  </Router>
);

useNavigate

現(xiàn)在，你可以在App.js文件中使用useNavigate鉤子。

// App.js
import React from 'react';
import {
  useNavigate,
} from 'react-router-dom';
export default function App() {
  const navigate = useNavigate();
  const handleClick = () => {
    // ??? navigate programmatically
    navigate('/about');
  };
  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

會發(fā)生錯誤是因為useNavigate鉤子使用了Router組件提供的上下文，所以它必須嵌套在Router里面。

用Router組件包裹你的React應(yīng)用程序的最佳位置是在你的index.js文件中，因為那是你的React應(yīng)用程序的入口點。

一旦你的整個應(yīng)用都被Router組件所包裹，你可以隨時隨地的在組件中使用react router所提供的鉤子。

Jest

如果你在使用Jest測試庫時遇到錯誤，解決辦法也是一樣的。你必須把使用useNavigate鉤子的組件包裹在一個Router中。

// App.test.js
import {render} from '@testing-library/react';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';
// ??? wrap component that uses useNavigate in Router
test('renders react component', async () => {
  render(
    <Router>
      <App />
    </Router>,
  );
  // your tests...
});

useNavigate鉤子返回一個函數(shù)，讓我們以編程方式進行路由跳轉(zhuǎn)，例如在一個表單提交后。

我們傳遞給navigate函數(shù)的參數(shù)與<Link to="/about">組件上的to屬性相同。

replace

如果你想使用相當于history.replace()的方法，請向navigate函數(shù)傳遞一個配置參數(shù)。

// App.js
import {useNavigate} from 'react-router-dom';
export default function App() {
  const navigate = useNavigate();
  const handleClick = () => {
    // ??? replace set to true
    navigate('/about', {replace: true});
  };
  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

當在配置對象中將replace屬性的值設(shè)置為true時，瀏覽器歷史堆棧中的當前條目會被新的條目所替換。

換句話說，由這種方式導(dǎo)航到新的路由，不會在瀏覽器歷史堆棧中推入新的條目。因此如果用戶點擊了回退按鈕，并不會導(dǎo)航到上一個頁面。

這是很有用的。比如說，當用戶登錄后，你不想讓用戶能夠點擊回退按鈕，再次回到登錄頁面。或者說，有一個路由要重定向到另一個頁面，你不想讓用戶點擊回退按鈕從而再次重定向。

你也可以使用數(shù)值調(diào)用navigate 函數(shù)，實現(xiàn)從歷史堆棧中回退的效果。例如，navigate(-1)就相當于按下了后退按鈕。

原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報錯useNavigate() may be used only in context of Router的詳細內(nèi)容，更多關(guān)于React報錯useNavigate的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: