React報(bào)錯(cuò)useNavigate()?may?be?used?only?in?context?of?Router怎么解決

今天小編給大家分享一下React報(bào)錯(cuò)useNavigate() may be used only in context of Router怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

總覽

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

下面是一個(gè)在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>
  );
}

會(huì)發(fā)生錯(cuò)誤是因?yàn)?code>useNavigate鉤子使用了Router組件提供的上下文，所以它必須嵌套在Router里面。

用Router組件包裹你的React應(yīng)用程序的最佳位置是在你的index.js文件中，因?yàn)槟鞘悄愕腞eact應(yīng)用程序的入口點(diǎn)。

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

Jest

如果你在使用Jest測(cè)試庫時(shí)遇到錯(cuò)誤，解決辦法也是一樣的。你必須把使用useNavigate鉤子的組件包裹在一個(gè)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鉤子返回一個(gè)函數(shù)，讓我們以編程方式進(jìn)行路由跳轉(zhuǎn)，例如在一個(gè)表單提交后。

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

replace

如果你想使用相當(dāng)于history.replace()的方法，請(qǐng)向navigate函數(shù)傳遞一個(gè)配置參數(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>
  );
}

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

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

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

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

以上就是“React報(bào)錯(cuò)useNavigate() may be used only in context of Router怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。