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 />
)

App.jsx：问题就在这句报错<NavLink className='app-container-link'  to="/about" >About</NavLink>，因为这个需要用在一个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 (
        <div className="app-container">
            <p className="app-container-title">React Router Demo</p>
            <hr/>
            <div className="app-container-content">
                <div>
                    {/*
                    路由链接：相当于a标签切换页面
                     */}
                    <NavLink className='app-container-link'  to="/about" >
                        About
                    </NavLink>
                    <NavLink  className='app-container-link'  to="/home">
                        Home
                    </NavLink>
                </div>
                <div className="app-container-content-page">
                    {/*
                   Routes：管理Route标签，其中如果有路径匹配到了Route,就不会继续匹配
                       假如路径为/about下面有两个匹配上一个就不会继续匹配
                        <Route path="/about" element={<About/>}/>
                        <Route path="/about" element={<Home/>}/>
                   Route：相当于一个map，key为路径value是组件(页面)
                        path：路径映射
                        element:要展示的组件
                   NavLink的to属性不能重复,且Route的path需要加上前斜线
                */}
                    <Routes>
                        <Route  path="/about" element={<About/>}/>
                        <Route  path="/home" element={<Home/>}/>
                    </Routes>
                </div>
            </div>
        </div>)

解决方法：改变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(
    <BrowserRouter>
        <App />
    </BrowserRouter>
)
//或者
root.render(
    <HashRouter>
        <App />
    </HashRouter>
)