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

Question

我刚开始学习 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"

Answer 1

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

原来我不小心忘记了将

to

道具包含在其中一个

<Link />

组件中。

希望错误信息更好。一个简单的

required prop "to" not found

或类似的东西会有所帮助。希望这可以节省一些时间遇到同样问题的其他人。

Answer 2

错误是因为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')
);

您可以查看文档以了解它现在是如何工作的。

这里我有一个带有路由动画的回购协议。

在这里你可以找到现场演示。

Answer 3

只需确保您已将

to

道具添加到

<Link>

否则您也会遇到同样的错误。

添加后应该是这个样子：-

<Link to="#">

Answer 4

我有同样的错误，我通过更新

history

从

2.x.x

到

4.x.x

解决了它

npm 安装 history@latest --save

Answer 5

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

react-router-4

并且访问

pathname

已经改变了。

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

this.props.location.pathname

收件人： （React-Router-4）

this.props.history.location.pathname

Answer 6

React Router v6 中的 API 与 v5 相比发生了变化

请参阅以下已接受的答案：在 v6 React Router 中测试页面时“无法读取未定义的属性（读取‘路径名’）”

Answer 7

检查应用程序中的所有 Link 或 NavLink 组件，其中一些可能缺少负责将用户重定向到另一条路径的“to”属性

Answer 8

如果您将

undefined

或

null

值传递给

to

的道具

<Link />

，这个错误仍然会发生。

Answer 9

只需使用 BrowserRouter 作为 Router，而不是 Router

Answer 10

使用 BrowserRouter 而不是 Router 作为包装器，并且不要忘记导入 BrowserRouter

<BrowserRouter>
    // Rest of the app.
</BrowserRouter>

当您使用 Link 而忘记提及 to="/" prop 时，也会出现此错误。

Answer 11

您正在为 Link 元素的“to”属性赋予未定义的值

import { Link } from "react-router-dom";

const path = undefined;

function Home() {
  return (
        <Link to={path}>Home</Link> 
  );
}

Answer 12

原来import matter和Router的顺序应该在先

不正确

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

正确

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

Answer 13

在 react-router-dom 6+ 我收到这个错误

错误：

   <Routes>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
   </Routes>

解决方案：

<Routes>
   <Route exact path="/" element={<Home />} />
   <Route exact path="/about" element={<About />} />
   <Route exact path="/user" element={<User />} />
</Routes>

Answer 14

当我尝试使用

history.props('./somelink')

时出现了类似的错误。我一直收到路径名未定义的错误。事实证明，我也在下面的 JSX 中使用了

<Link></Link>

。这就是导致错误的原因。希望这对犯同样错误的人有所帮助

Answer 15

对于 react-router v6 你应该这样做（使用元素并将所有路由包含在`：https://stackoverflow.com/a/70250612/570612

Answer 16

这可能对您在 react-router-dom v6 中有所帮助

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

Answer 17

在某些情况下，您需要像这样在主路由器上定义位置道具

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

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

编辑：必须使用“历史”中的 createBrowserHistory() 定义历史

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

问题描述投票：0回答：17

17个回答

最新问题

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

问题描述 投票：0回答：17

17个回答

最新问题

问题描述投票：0回答：17