React路由问题Uncaught Error: useLocation() may be used only in the context of a ＜Router＞ component.

react-router-dom版本:6.16.0，出现问题代码如下：

index.js：渲染App.jsx

import React from "react";
import * as ReactDom from "react-dom/client";
import App from "./demo03_路由/App";

const element = document.querySelector('#root');

const root = ReactDom.createRoot(element);

root.render(
        
)

App.jsx：问题就在这句报错About，因为这个需要用在一个Router上下文中，而react没有检测到所以抛出标题中的错误，解决方法很简单，请查看下面

import './App.css'
import {Route, NavLink, Routes, Router} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default function App(){
    return (
        

            
React Router Demo
            

            

                

                    {/*
                    路由链接：相当于a标签切换页面
                     */}
                    
                        About
                    
                    
                        Home
                    
                
                

                    {/*
                   Routes：管理Route标签，其中如果有路径匹配到了Route,就不会继续匹配
                       假如路径为/about下面有两个匹配上一个就不会继续匹配
                        }/>
                        }/>
                   Route：相当于一个map，key为路径value是组件(页面)
                        path：路径映射
                        element:要展示的组件
                   NavLink的to属性不能重复,且Route的path需要加上前斜线
                */}
                    
                        }/>
                        }/>
                    
                
            
        
)

解决方法：改变index.js，增加Router上下文，为什么出问题：NavLink 组件需要 Router 组件提供的上下文信息才能正常工作,主要原因有:

1. NavLink 组件内部使用了 React Router 的 hook - useResolvedPath：useResolvedPath 会从CONTEXT 中解析路径信息。所以 NavLink 需要 Router 提供的 CONTEXT 才能获取到解析后的路径。
2. NavLink 的 active 样式依赖 location 信息：NavLink 的 activeClassName 和 isActive 属性都依赖当前的 location 信息来判断是否应用 active 样式。这个 location 信息只能从 Router 的 CONTEXT 获取。
3. Router 管理整个应用的导航：Router 管理着整个单页应用的路由和导航。NavLink 对导航的响应需要依赖 Router 的管理。

root.render(
    
        
    
)
//或者
root.render(
    
        
    
)