React Router:无法读取未定义的属性“路径名" [英] React Router: Cannot read property 'pathname' of undefined

问题描述

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

I've just started learning React and got stuck at this error.

未捕获的类型错误:无法读取未定义的属性路径名"在新路由器上

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.我尝试寻找变化，但没有找到有效的解决方案.

The tutorial I was following uses React-Router 2.0.0, but on my desktop I'm using 4.1.1. I tried searching for changes but was unsuccessful in finding a solution that worked.

"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"

推荐答案

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

The error is because the api in React Router v4 is totally different. You can try this:

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

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

You can review the documentation to learn how it works now.

这里我有一个带有路由动画的仓库.

Here I have a repo with routing animation.

并且此处您可以找到现场演示.

And here you can find a live demo.

这篇关于React Router:无法读取未定义的属性“路径名"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！