React-Router-Dom代码报错：useRoutes() may be used only in the context of a ＜Router＞ component.

我的代码逻辑是

一直报错，就算包裹上<RouterProvider/>也是无效，于是本人查了官方文档

使用方法：

router.js

import { Navigate, createBrowserRouter } from "react-router-dom"
import Page1 from "../page/page1"
import Page2 from "../page/page2"
//使用createBrowserRouter 创建路由器实例
const routes = createBrowserRouter(
   [

   {
    path: '/page1',
    element:<Page1/>
   },
   {
    path: '/page2',
    element:<Page2/>
   },
   {
      path: '*',
      element:<Page1/>
   },
   {
      path: '/',
      element:<Navigate to='/page1'/>
   }
]
)
  
 
export default routes

App.js

import React from 'react'
import {  RouterProvider } from 'react-router-dom'
import routes from './routes/index'

export default function App() {
  return (
    <div>
      <div className="panel-body">
     //在根组件中使用RouterProvider 包裹起来
        <RouterProvider router={routes}/>  
      </div>
  </div>
  )
}

到这里问题就解决了

出现问题的原因大概就是新升级的react router v6版本，而我们看的文章都是以前的

如果大家设置路由方法和我不一样，下面提供两种方法任大家阅读

1、

import React from 'react';  
import ReactDOM from 'react-dom';  
import { createBrowserRouter, RouterProvider, createRoutes } from 'react-router-dom';  
import HomePage from './HomePage';  
import AboutPage from './AboutPage';  
  
// 定义路由配置  
const routeConfigs = [  
  { path: '/', element: <HomePage /> },  
  { path: '/about', element: <AboutPage /> },  
];  
  
// 使用 createRoutes 创建路由列表  
const routes = createRoutes(routeConfigs);  
  
// 使用 createBrowserRouter 创建路由器实例  
const router = createBrowserRouter(routes);  
  
// 根组件  
function App() {  
  return (  
    <RouterProvider router={router}>  
      {/* 这里可以放置其他 UI 元素或布局组件 */}  
      <div>  
        {/* 应用的其他部分 */}  
      </div>  
    </RouterProvider>  
  );  
}  
  
// 渲染应用  
ReactDOM.render(<App />, document.getElementById('root'));

2、

import * as React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);
//**来源于React Router 官方文档

好啦祝大家学习顺利