總覽

當(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)擊回退按鈕，再次回到登錄頁面?；蛘哒f，有一個(gè)路由要重定向到另一個(gè)頁面，你不想讓用戶點(diǎn)擊回退按鈕從而再次重定向。

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

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

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

最新評(píng)論