React Router V6结合TypeScript开发时<Router>组件出现类型错误的技术求助

嘿，我一眼就发现问题出在哪啦！你这段代码里犯了两个常见的React Router v6使用错误：

错误原因分析 #

1. 重复嵌套路由容器：你同时用了<BrowserRouter>和<Router>，但实际上<BrowserRouter>本身就是一个封装好的高级路由容器——它内部已经实现了<Router>组件所需的location和navigator逻辑，直接嵌套<Router>的话，因为你没传入这两个必填属性，TypeScript就会抛出类型错误。
2. Route未被Routes包裹：React Router v6强制要求所有<Route>组件必须放在<Routes>（替代v5的<Switch>）组件内部，不然路由匹配会失效，虽然这不是你当前的类型错误原因，但也是必须修正的问题。

修正后的完整代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; // 新增导入Routes
// Styles
import './css/index.css';
// Pages Directory
import * as Pages from './pages';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      {/* 用Routes包裹所有Route组件 */}
      <Routes>
        <Route path="/" element={<Pages.Home />} />
        <Route path="about" element={<Pages.About />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

额外说明 #

• <BrowserRouter>是日常开发中最常用的路由容器，它会自动管理浏览器的历史记录、URL变化，完全满足绝大多数场景的需求，不需要再额外嵌套<Router>。
• 如果你的业务场景确实需要自定义路由逻辑（比如模拟路由状态、非浏览器环境的路由），才需要用到低级的<Router>组件，这时必须手动传入location和navigator属性，示例如下：

import { Router } from 'react-router-dom';
import { createMemoryRouter } from 'react-router';

const router = createMemoryRouter([
  { path: '/', element: <Pages.Home /> },
  { path: 'about', element: <Pages.About /> },
]);

// 此时可以用Router组件
<Router location={router.state.location} navigator={router}>
  {/* 路由内容 */}
</Router>

但这种场景非常少见，普通Web应用用<BrowserRouter>就够啦。

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