React 路由无法读取导航上的路径名属性

Question

我最近开始使用 React 开发前端应用程序，并且拥有一点 React-Native 编程经验。 为了提高我对 React 的了解，我学习了官方文档并学习了 udemy 课程。 因此，我正在构建一个小型测试应用程序，在其中使用反应路由（遵循我们在 udemy 课程中看到的内容）。 但是，我有以下与路由相关的错误（我附上错误屏幕）

我在网上的堆栈上搜索了可能的解决方案，例如降级react-router-dom，或修改历史声明，但不幸的是我仍然收到此错误，并且我无法理解它来自何处。 您有什么建议或建议吗？

我的应用配置：

• package.json

  "name": "app1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "history": "^5.3.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-redux": "^7.2.8",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• paths.js

import React, { Component } from 'react';

import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';

//import container home-page
import Container1 from './containers/container1';
import Header from './containers/header';
import history from './utils/history';

//react router import
import { Router, Route } from 'react-router';

class Routes extends Component {
   render() {
      return (
         <div>
            <Router history={history.location} navigator={history} >
               <div>
                  <Header />
                  <Route path="/" component={Container1} />
                  <Route path="/component1" component={Component1} />
                  <Route path="/component2" component={Component2} />
                  <Route path="/component3" component={Component3} />
               </div>
            </Router>
         </div>
      )
   }
}

export default Routes;

-history.js

var createHistory = require('history').createBrowserHistory;
export default createHistory();

Answer 1

发行

低级路由器需要与V5中的几个不同的道具。

router

 声明功能路由器（
  道具：routerprops
）：React.Reactelement |无效的;

接口routerprops {
  Basename？：字符串；
  儿童？：react.reeactnode;
  位置：部分＆lt;位置＆gt; |细绳; //＆lt;  - 必需
  导航类型？：导航类型；
  导航器：导航器； //＆lt;  - 必需
  静态？
}
 

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

  let {
    pathname = "/", // <-- cannot read "pathname" of undefined!
    search = "",
    hash = "",
    state = null,
    key = "default",
  } = locationProp;

  ...

  if (location == null) {
    return null;
  }

  return (
    <NavigationContext.Provider value={navigationContext}>
      <LocationContext.Provider
        children={children}
        value={{ location, navigationType }}
      />
    </NavigationContext.Provider>
  );
}

您错误地使用历史 prop而不是位置 prop，这就是为什么位置在组件中不确定并且无法阅读PathName。

此外，在react-rout-dom@6 路由组件中必须包装在ROUTES组件中，以使路由路径匹配和渲染工作。

解决方案

传递正确的道具，然后将路由组件包装在路由组件中。

import React, { Component } from 'react';

import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';

//import container home-page
import Container1 from './containers/container1';
import Header from './containers/header';
import history from './utils/history';

//react router import
import { Router, Routes, Route } from 'react-router';

class Routes extends Component {
  render() {
    return (
      <div>
        <Router location={history.location} navigator={history} >
          <div>
            <Header />
            <Routes>
              <Route path="/" component={Container1} />
              <Route path="/component1" component={Component1} />
              <Route path="/component2" component={Component2} />
              <Route path="/component3" component={Component3} />
            </Routes>
          </div>
        </Router>
      </div>
    )
  }
}

Answer 2

您正在使用 react router v6 ，在 v6 中，您必须将所有 route's 包装在 ...< ;/Routes> 标签。

//react router import
import { Router, Route, Routes } from 'react-router'; // Make sure to import ----Routes----

class Routes extends Component {
   render() {
      return (
         <div>
            <Router history={history.location} navigator={history} >
               <div>
                  <Header />
                  <Routes>
                    <Route path="/" component={Container1} />
                    <Route path="/component1" component={Component1} />
                    <Route path="/component2" component={Component2} />
                    <Route path="/component3" component={Component3} />
                  </Routes>
               </div>
            </Router>
         </div>
      )
   }
}

export default Routes;

除了 之外，您不能在 ... 之间添加任何内容。