React Router：无法读取未定义的属性“路径名”

IT技术 reactjs react-router react-jsx jsx react-router-redux
2021-04-19 04:32:30

我刚刚开始学习 React 并陷入了这个错误。

未捕获的类型错误：无法读取新路由器上未定义的属性“路径名”

这是我的代码：

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

我遵循的教程使用 React-Router 2.0.0，但在我的桌面上我使用的是 4.1.1。我尝试搜索更改，但未找到有效的解决方案。

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"
6个回答

我收到了上面的错误消息，它非常神秘。我尝试了提到的其他解决方案，但没有奏效。

结果我不小心忘记to在其中一个<Link />组件中包含该props。

希望错误信息更好。一个简单的required prop "to" not found或类似的东西会有所帮助。希望这可以拯救遇到同样问题的其他人。

该死，这就是问题所在。我正在遍历一个对象数组，并且调用了键route，但是在循环时我正在寻找一个to未定义的键调用：facepalm：
2021-06-12 04:32:30

错误是因为 React Router v4 中的 api 完全不同。你可以试试这个：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

您现在可以查看文档以了解其工作原理。

在这里，我有一个带有路由动画的存储库。

而在这里，你可以找到一个现场演示。

我有同样的错误，我通过更新history从2.x.x到解决了它4.x.x

npm install history@latest --save

我有一个不同的原因，但同样的错误并因此遇到了这个问题。把它放在这里，以防其他人发生同样的情况，它可能会有所帮助。对我来说的问题是我已经更新到react-router-4并且访问pathname已经改变。

更改： （React-Router-3 及更早版本）

this.props.location.pathname

至： （React-Router-4）

this.props.history.location.pathname

只要确保你已经添加了toprops，<Link>否则你也会得到同样的错误。

添加后它应该看起来像这样：-

<Link to="#">
其它你可能感兴趣的问题
上一篇解构对象并忽略结果之一 下一篇useRef TypeScript - 不可分配给类型 LegacyRef<HTMLDivElement>