Question

React Router：无法读取未定义的属性“pathname”

2017-04-25

199710

react-router reactjs jsx react-router-redux

我刚刚开始学习 React，并被这个错误卡住了。

Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router

这是我的代码：

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

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

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

即使 ＆lt; link/＆gt; 不需要 to prop，您只需添加并编写它带有空的报价 - ＆gt;例如 ＆lt;链接到=“” /＆gt; < /code>。这将解决问题！

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

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')
);

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

这里我有一个带有路由动画的 repo。

此外，这里你可以找到一个现场演示。

Answer 3

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

不正确

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

正确

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