使用React Router的useLocation钩子时报错useContext未定义如何解决？

useLocation 是React Router提供的内置钩子，底层依赖Router组件传递的上下文数据，必须在<Router>组件包裹的子组件作用域内调用。
你当前在App组件的顶层直接调用useLocation，但<Router>是在App组件的返回内容中才渲染的，调用位置处于Router的上下文覆盖范围之外，因此无法获取到对应的context值，触发useContext is undefined报错。

有两种常用的修复方式，按需选择即可：

方案1：将useLocation调用移到Router内部的子组件 #

如果不需要在App顶层获取路由信息，直接把useLocation的调用逻辑放到被Router包裹的子组件内即可，示例修改后代码如下：

import React from 'react';
import Welcome from './Components/Welcome/Welcome';
import {
    BrowserRouter as Router,
    Link,
    Route,
    Switch,
    Redirect,
    useLocation,
} from 'react-router-dom'
import app from "./firebase"

const  App = () => {
  return (
    <div className="App">
      <Router>
          <Route path = "/welcome">
            <Welcome  />
          </Route>
          <Route path="/ui">
            <UI/>
          </Route>
      </Router>
    </div>
  );
}

const UI = () => {
  // 在Router内部的子组件调用useLocation，可正常执行
  let location = useLocation()
  console.log('当前路由信息：', location)
  return(
    <h1>UI i am</h1>
  )
}

export default App;

方案2：将Router提升到App组件外层 #

如果确实需要在App组件顶层获取路由信息，就把<Router>标签从App组件中移到入口文件（通常是index.js）里包裹App组件，这样App整体都处于Router的上下文范围内，就可以正常调用useLocation了。

入口文件index.js修改示例： #

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

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

App组件对应修改： #

删除App组件内的<Router>标签，直接调用useLocation即可：

import React from 'react';
import Welcome from './Components/Welcome/Welcome';
import {
    Link,
    Route,
    Switch,
    Redirect,
    useLocation,
} from 'react-router-dom'
import app from "./firebase"

const  App = () => {
  // 此时App已经被外层的Router包裹，可正常调用
  let location = useLocation()
  console.log('当前路由信息：', location)

  return (
    <div className="App">
        <Route path = "/welcome">
          <Welcome  />
        </Route>
        <Route path="/ui">
          <UI/>
        </Route>
    </div>
  );
}

const UI = () => {
  return(
    <h1>UI i am</h1>
  )
}

export default App;

内容的提问来源于stack exchange，提问作者404th