当读取路径名属性时，Reaction-Router-Dom引发两个错误 [英] React-router-dom throws two errors when reading the pathname property

问题描述

当我将这些路由与Reaction-Router-DOM 6一起使用时，我看到两个不同的错误：

1. TypeError：无法对‘’unfinded‘或’null‘的属性’pathname‘进行结构分析

2. TypeError：无法读取未定义的属性(读取‘路径名’) 并向我展示了Reaction路由器文件中的代码：C:/Users/FAMILIA/Desktop/packages/react-router/index.tsx:281

    let {
    pathname = "/",
    search = "",
    hash = "",
    state = null,
   

我尝试过的：重新安装reaction-router-dom，将历史依赖更新到版本5.1.0

这是我的代码：

import { Router, Routes, Route, Link, NavLink } from 'react-router-dom'
import Home from './views/Home.jsx';

function App() {
  return (
    <Router>
      <div>
        <Link to="/home">Home</Link>
      </div>
      <Routes>
        <Route path="/home" element={<Home/>}/>
      </Routes>
    </Router>
  );
}

export default App;

这些是Package.json的依赖项

history
"dependencies": {
    "@craco/craco": "^6.4.0",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "history": "^5.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }

推荐答案

第6版react-router-dom与以前的版本相比有一些非常重要的突破性更改。

使用Router从react-router-dom导入并不常见，但即使在版本4/5中，您通常也会在较低级别Router上导入BrowserRouter、HashRouter或MemoryRouter之一。

您的问题原因位于here源代码：

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

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

  ...

请注意，这里的locationProp是从。如果您没有为Router组件提供location道具，则此解析失败。

请注意，在较高级别的路由器中，这些道具被实例化并为您传递。为我们创建并传递历史对象(navigation)和location道具。我们不需要自己管理这些。

BrowserRouter

export function BrowserRouter({
  basename,
  children,
  window
}: BrowserRouterProps) {
  let historyRef = React.useRef<BrowserHistory>();
  if (historyRef.current == null) {
    historyRef.current = createBrowserHistory({ window });
  }

  let history = historyRef.current;
  let [state, setState] = React.useState({
    action: history.action,
    location: history.location
  });

  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      basename={basename}
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
}

如果您希望使用Router组件，则需要自己创建并传递这些道具。

示例：

import { Router, Routes, Route, Link } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router location={history.location} navigator={history}>
      <div>
        <Link to="/home">Home</Link>
      </div>
      <Routes>
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

替代方案OFC将只使用较高级别的路由器之一。

示例：

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

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/home">Home</Link>
      </div>
      <Routes>
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

这篇关于当读取路径名属性时，Reaction-Router-Dom引发两个错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！