Issue

您看到的错误是由导入和使用低级Router组件引起的，该组件有几个必需的props .

请参见Router:

declare function Router(
  props: RouterProps
): React.ReactElement | null;

interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string; // <-- required!
  navigationType?: NavigationType;
  navigator: Navigator;                 // <-- required!
  static?: boolean;
}

它是丢失的locationprops 具有路由需要的pathname属性.

你可以在source中看到，低层Router试图从未定义的locationprops 中解体.

export function Router({
  basename: basenameProp = "/",
  children = null,
  location: locationProp, // <-- no default/fallback value
  navigationType = NavigationType.Pop,
  navigator,
  static: staticProp = false,
  future,
}: RouterProps): React.ReactElement | null {
  .....

  if (typeof locationProp === "string") {
    locationProp = parsePath(locationProp);
  }

  let {
    pathname = "/", // <-- attempted destructure from undefined!
    search = "",
    hash = "",
    state = null,
    key = "default",
  } = locationProp;

  ....
}

您还在其他组件中遗漏了Reaction-RouterV6 API的其他关键部分，即所有Route个组件都需要呈现到一个包含路径匹配逻辑的Routes组件中，并且Route组件API也发生了显著变化.

Solution

您几乎永远不需要使用低级Router组件.你应该使用一个高级路由，例如BrowserRouter、HashRouter、MemoryRouter等，它们都实现了Router组件所需的基本props .

Main.jsx

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

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

更新App组件中的路由渲染以将所有Route组件包装在Routes中，以便它们可以匹配，并更新Route组件以使用正确的elementprops 来渲染路由的内容.elementprops 预计会有React.ReactNode，或者更通俗地说是JSX.

App.jsx

import { Routes, Route } from "react-router-dom"
import Home from "./Pages/Home"

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      ... other routes ...
    </Routes>
  );
}

export default App;

有关更完整的详细信息，请参见:

• Migrating from v5 guide
• Main Concepts个
• Picking a Router
• Routes
• Route