当读取路径名属性时，Reaction-Router-Dom引发两个错误

问题描述

当我将这些路由与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源代码：

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

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

BrowserRouter

如果您希望使用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引发两个错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！