useNavigate() may be used only in the context of a ＜Router＞ component.

报错信息：useNavigate() may be used only in the context of a component.

在react项目中配置路由，使用编程式导航 useNavigate()函数用来实现编程导航的跳转时
报错"useNavigate() may be used only in the context of a Router component"警告，是因为useNavigate只能在Router上下文中使用useNavigate 钩子。

解决办法
第一步：将index.js文件React应用包裹到Router中的，整个应用都会被Router组件所包裹，之后就可以随时随地的在组件中使用react router所提供的钩子。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {
    
    BrowserRouter as Router} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
     <Router>
       <App />
     </Router>
  </React.StrictMode>
);

第二步：在组件中正常使用useNavigate()函数。

import React from 'react';
import menuList from '../router/menus';
import {
    
     useNavigate } from 'react-router-dom'
import {
    
     Layout, Menu } from 'antd';
const {
    
     Sider } = Layout;
export function SliderMenu(){
    
    
    const state = {
    
    
        collapsed: false,
        setCollapsed: false,
        menus: newArr,
    }
    const navigate = useNavigate()
    const changePath=(obj)=>{
    
    
        console.log(obj);
        navigate(obj.key,{
    
    replace:true})
    }
        return (
            <Sider trigger={
    
    null} collapsible collapsed={
    
    state.collapsed}>
                <div className="logo" />
                <Menu theme="dark" mode="inline" defaultSelectedKeys={
    
    ['1']} items={
    
    state.menus} onClick={
    
    changePath}/>
            </Sider>
        )
}