Office Add-inf开发中React路由报错？

Question

在开发Office add-ins扩展中，react报错内容如下：

Uncaught Error: [ProxyFacade] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

The above error occurred in the <Routes> component:

/router/index.jsx 路由文件内容如下：

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React from "react";

import App from "../components/App"
import About from "../pages/About.jsx"
import Category from "../pages/Category.jsx"
import Images from "../pages/Images.jsx"

// 创建路由
const BaseRouter = () => (
    <Router>
        <Routes>
            <Route path = '/' element={<App />}>
                {/* 嵌套路由 */}
                <Route path = '/about' element={<About />}></Route>
                <Route path='/category' element={<Category />}></Route>
                <Route path = '/images' element={<Images />}></Route>
            </Route>
        </Routes>
    
    </Router>
)

// 导出路由
export default BaseRouter

./components/App 文件内容

import React from 'react'
import { Outlet } from 'react-router-dom'

export default function App() {
  return (
    <div>
      App
      <Outlet></Outlet>
    </div>
          
  )
}

在taskpane/index文件中引入/router/index.jsx

import App from "./components/App";
import Router from './router/index.js'
import * as React from "react";
import * as ReactDOM from "react-dom";
/* global document, Office, module, require */


let isOfficeInitialized = false;

const title = "Contoso Task Pane Add-in";

const render = () => {
  ReactDOM.render(
      <Router/>,
    document.getElementById("container")
  );
};

/* Render application after Office initializes */
Office.onReady(() => {
  isOfficeInitialized = true;
  render(Router);
});

/* Initial render showing a progress bar */
render(App);

if (module.hot) {
  module.hot.accept("./components/App", () => {
    const NextApp = require("./components/App").default;
    render(NextApp);
  });
}