React Router中useLocation调用报错 第三方组件问题求助

在React应用中使用第三方库rd-component的SubPaySuccess组件时，执行到const location = useLocation();代码行时出现报错。

组件代码 #

const SubPaySuccess: React.FC = () => {
    const location = useLocation();
    if (location.search == null) {
        return (<div className="pay-success-body">
            <h1>Pay Failed!</h1>
        </div>);
    }
}

报错信息 #

react-dom.production.min.js:189 Error
    at router.js:270:11
    at dp (index.js:141:79)
    at Fp (SubPaySuccess.tsx:10:22)
    at ki (react-dom.production.min.js:167:137)
    at kl (react-dom.production.min.js:290:337)
    at Ec (react-dom.production.min.js:280:389)
    at bc (react-dom.production.min.js:280:320)
    at vc (react-dom.production.min.js:280:180)
    at ic (react-dom.production.min.js:271:88)
    at ac (react-dom.production.min.js:268:429)
ps @ react-dom.production.min.js:189
a.componentDidCatch.n.callback @ react-dom.production.min.js:190
ja @ react-dom.production.min.js:144
Sl @ react-dom.production.min.js:261
El @ react-dom.production.min.js:260
yl @ react-dom.production.min.js:259
(anonymous) @ react-dom.production.min.js:283
wc @ react-dom.production.min.js:281
ac @ react-dom.production.min.js:270
w @ scheduler.production.min.js:13
T @ scheduler.production.min.js:14
hooks.tsx:597 React Router caught the following error during render Error
    at router.js:270:11
    at dp (index.js:141:79)
    at Fp (SubPaySuccess.tsx:10:22)
    at ki (react-dom.production.min.js:167:137)
    at kl (react-dom.production.min.js:290:337)
    at Ec (react-dom.production.min.js:280:389)
    at bc (react-dom.production.min.js:280:320)
    at vc (react-dom.production.min.js:280:180)
    at ic (react-dom.production.min.js:271:88)
    at ac (react-dom.production.min.js:268:429) {c

当前环境与路由配置 #

• react-router-dom版本：^6.11.1
• 路由配置代码：

import { createBrowserRouter } from 'react-router-dom';
import App from '../page/index/Home';
import Login from '../page/user/login/Login';
import { SubPaySuccess } from 'rd-component';

const routes = createBrowserRouter([
  {
    path: "/",
    element: <App />
  },
  {
    path: "/product/pay/success",
    element: <SubPaySuccess />
  },
  {
    path: "/user/login",
    element: <Login />
  }
]);

export default routes;

报错核心原因是：useLocation钩子必须在React Router提供的上下文环境中使用。你已经创建了路由配置，但缺少将路由上下文注入应用的关键步骤——用RouterProvider包裹应用根组件。

修复步骤：

1. 打开应用入口文件（通常是main.tsx或index.tsx）
2. 导入RouterProvider和你定义的routes配置
3. 用RouterProvider包裹根组件，传入routes作为props

示例代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import routes from './path/to/your/routes'; // 替换为你的routes文件实际路径

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={routes} />
  </React.StrictMode>,
);

完成后，所有路由组件（包括SubPaySuccess）都会处于React Router的上下文环境中，useLocation钩子即可正常工作。

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