反应路由不起作用

Question

我是反应初学者。当我把Route标签我得到如下图所示的错误！任何人都知道这一点，请告诉我答案。

以下是我的JSX代码。

    import React, { Component } from 'react';
import { render } from 'react-dom';
import {Router, Route} from 'react-router';

class Home extends Component {
    render(){
        return (<h1>Hi123</h1>);
    }
}

render(
    <Router>
        <Route path="/" component={Home}/>
    </Router>,
    document.getElementById('container')
);

这是我的包文件

  {
  "name": "routing",
  "version": "1.0.0",
  "description": "routing test",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -d --watch",
    "build": "webpack",
    "start": "nodemon",
    "serve": "serve ./public",
    "dev"  : "webpack-dev-server --content-base src --inline --hot"
  },
  "author": "VJ",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "serve": "^5.0.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "history": "^2.0.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0"
  }
}

Answer 1

您需要为标记添加browserHistory属性。像这样附加你的代码：

{{1}}

有关browserHistory属性的更多信息，请check out react-router's API docs。

Answer 2

我今天早些时候遇到了同样的问题。我做了一点研究，看起来反应 - 路由器有一点点更新。我转而使用'react-router-dom'，然后按照新的文档进行操作：https://reacttraining.com/react-router/web/example/basic

解决了这个问题。因此，从node_modules中删除它，并在package.json文件中替换此行：

"react-router": "^4.0.0"

改为使用它：

"react-router-dom": "^4.0.0"

（回滚到反应路由器的早期版本也可能会解决问题。）如果您确实更新到react-router-dom，请务必查看文档。导入时，您需要使用BrowserRouter作为路由器... BrowserRouter似乎无需将browserHistory添加为路由器组件的属性。