React路由器：无法读取属性＆＃x27; pathname＆＃x27;不确定的

Question

我刚刚开始学习反应，并陷入了这个错误。

未定义 在新路由器

这是我的代码：

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

这可能会帮助您进行React-Router-Dom v6

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

Answer 2

在某些情况下，您需要像以下编辑那样定义主路由器上的位置道具

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

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

：必须使用“历史记录”的CreateBrowserhistory（）定义历史记录

Answer 3

转到index.js file和Wrap ＆lt; app/＆gt;内部＆lt; browerRoute＆gt;

<BrowserRouter>
    <App/>                                                   
</BrowserRouter>

您完成了：0

Answer 4

它无法正常工作，给我这个类型错误：TypeError：无法读取未定义的属性（读取'PathName'）
不幸的是，当我使用NavLink时，我正在输入错误的属性。
你可以解决这个问题

尝试以正确的方式记住写“到”属性。

Answer 5

我收到了上述错误消息，这非常神秘。我尝试了提到的其他解决方案，但它不起作用。

事实证明，我不小心忘记将to prop包括在＆lt; link/＆gt;组件之一中。

即使＆lt; link/＆gt;不需要to prop，您只需添加和写入空引号 - ＆gt;例如＆lt;链接到=“” /＆gt; < /code>。那会解决这个问题！

希望错误消息更清晰。一个简单的所需的prop“未找到”或类似的东西会有所帮助。希望这样可以节省某些时间遇到同样问题的人。

Answer 6

错误是因为React路由器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 7

事实证明，进口物和路由器的顺序应该首先

不正确

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

正确

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

Answer 8

只需确保您已将添加到 props props ＆lt; link＆gt;否则您也会遇到相同的错误。

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

<Link to="#">

Answer 9

我有相同的错误，我通过更新历史 从2.xx到4.xx解决了它。

npm安装历史@最新 - 萨夫

Answer 10

只需使用浏览器作为路由器，而不是路由器

Answer 11

我有不同的原因，但是同样的错误，因此遇到了这个问题。如果其他人也会发生同样的情况，这可能会有所帮助。
对我来说，问题是我已更新为react-router-4，并且访问pathName已更改。

更改：
（react-router-3＆amp; prort）

this.props.location.pathname

to： （react-router-4）

this.props.history.location.pathname

Answer 12

使用browserrouter而不是路由器作为包装器，并且不要忘记导入browserrouter

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

当您使用链接并忘记提及=“/” prop时也会出现此错误。

Answer 13

React路由器V6中的API已从V5变化。

请参阅下面的接受答案：
” '）“在V6 React路由器中测试页面时

Answer 14

检查您应用程序中的所有链接或NAVLink组件，其中一些可能会缺少“到”属性，该属性负责将用户重定向到另一个路径

Answer 15

如果您通过未定义或null值 ＆lt>＆lt; link/＆gt; 。

Answer 16

您为链接元素的“到”道具给出了不确定的价值

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

const path = undefined;

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

Answer 17

在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 18

您可以纠正导入： -

import {browserrouter作为路由器，路由，路由}从“ react-router-dom”;>

Answer 19

当我尝试使用history.props（'./ somelink'）时，出现了类似的错误。我一直发现路径名不确定的错误。事实证明，我还在下面的JSX中使用了＆lt;/link＆gt;/link＆gt;。这就是导致错误的原因。希望这对任何犯同样错误的人有帮助

Answer 20

对于React-Router v6，您应该执行此操作（使用元素并将所有路线封闭在： https://stackover.com/a/stackover.com/a/a/a/702506122 /570612