关于React,TypeError的路由:无法读取未定义的属性'getCurrentLocation'(...)

gre*_*reW 0 reactjs react-router

我正在尝试使用ReactJS的基本内容,我正在尝试了解如何使用React-Router

这是我的代码:

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;

const Home = React.createClass({
  render: function() {
    return (<h1>Welcome to the Home Page</h1>);
  }
});

ReactDOM.render((
    <Router>
      <Route path="/" component={Home} />
    </Router>
), document.getElementById('root')); 
Run Code Online (Sandbox Code Playgroud)

我一直收到以下错误:

未捕获的TypeError:无法读取未定义的属性'getCurrentLocation'(...)

我正在使用webpack将jsx编译成js,我错过了什么?(顺便说一下,webpack没有错误)

谢谢!

Pin*_*eda 9

您缺少路由器的历史记录定义:

<Router history={hashHistory|browserHistory|createMemoryHistory}>
  <Route path="/" component={Home} />
</Router>
Run Code Online (Sandbox Code Playgroud)

注意:您必须使用React路由器将所选历史记录类型添加到导入中,因此如果您选择添加browserHistory,则导入将如下所示:

import { browserHistory, Router, Route } from 'react-router'
           ^---added as a named import
Run Code Online (Sandbox Code Playgroud)

对不同选项的简要说明:

browserHistory:以路径'/'开头的完整URL路径.因此,如果您的SPA位于www.myapp.com,则www.myapp.com/默认情况下根路径将同步到.因此,如果您想要路由www.myapp.com/blog,则需要定义路由器路径' /blog'.

hashHistory:做同样的事情,但root从#url中找到的第一个字符开始:example.com/#/some/path对应于:/some/path

createMemoryHistory:用于测试和服务器呈现.此选项不会读取或操作地址栏.

查看:React Router Histories了解更多信息

  • 您应该在Home路径中嵌套`/ test`路径,如下所示:`<Router history = {browserHistory}> <Route path ="/"component = {Home}> <Route path ="/ test"component = { Testit} /> </ Route> </ Router>` (2认同)
  • 这个问题可能有所帮助 https://github.com/ReactjsProgram/React-Fundamentals/issues/36 (2认同)