使用 <Router> 的 React-Router 给出：- 无法读取未定义的属性“位置”答案

【问题标题】：React-Router using <Router> gives :- Cannot read property 'location' of undefined使用 <Router> 的 React-Router 给出：- 无法读取未定义的属性“位置”
【发布时间】：2018-08-02 06:30:40
【问题描述】：

我正在创建网络应用程序。我现在正在尝试将react-router 用于我现有的 js 文件。但是只使用<Router> 会给我这个错误：-

react-dom.development.js:11536 未捕获类型错误：无法读取未定义的属性“位置”

var lists2 = this.state.list2;
var aname = this.state.article.name;
var date = this.state.article.date;
var lists3 = this.state.listrec;

return (
  <div className = 'row'>
    <div id='recentsbar' className='col-md-3'>
      <div className = 'row'>
        <div className='col-md-9'>
          <div>
            <div style={{display: this.state.hide2}}>
              <h2> 
                <b> Recents </b>
              </h2>
            <div className="lds-ellipsis" style={{display: this.state.load2}} >
            <div></div><div></div><div></div><div></div></div>
            <div id='subl'>
              {lists3.map((number) =>
                  <Item3 name={number} show={this.rec.bind(this)} />
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className='col-md-8'>
    <div style={{display: this.state.hide}}> 
      <h1 style={{marginLeft: 6+'em'}}>
        <b> Subjects List </b>
      </h1>
    <div className='row'>
      <div className='col-md-6'>
        <ul style={{marginTop: 1+'em'}} /*className="list-group"*/ > 
          <div className="lds-ellipsis" style={{display: this.state.load}}>
          <div></div><div></div><div></div><div></div></div>
          {lists.map((number) =>
              <Item name={number} hide={this.hide.bind(this)}/>
          )}
        </ul>
      </div>
    </div>
  </div>

  <div className='col-md-8'>
    <div style={{display: this.state.show}}> 
      <h1 style={{ marginLeft: 6+'em'}}> 
        <b> {this.state.selsub} </b>
      </h1>
      <div className='row'>
        <div className='col-md-auto' style={{ marginLeft: 6+'em'}}>
          <ul style={{marginTop: 1+'em'}} className="list-group art" > 
            <div className="lds-ellipsis" style={{display: this.state.load}} >
              <div></div><div></div><div></div><div></div></div>
              {lists2.map((number) =>
                  <Item2 name={number} hide2={this.hide2.bind(this)}/>

              )}
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div style={{display: this.state.showarticle }}> 
    <div className="lds-ellipsis" style={{display: this.state.load}>
      <div></div><div></div><div></div><div></div></div>
      <div className='arthead'> {aname} </div>  
        <div style={{float: 'right', opacity: 0.5 }}> Updated on: {date} </div>
          <div style={{marginLeft: 1+'em' , lineHeight: 2 + 'em', marginTop: 4+'em'}} 
            dangerouslySetInnerHTML={{ __html: this.state.article.body }}>
          </div>
        </div>
      </div>
    <Router></Router>
  </div>
  );
}

包含<Router></Router> 会给我这个错误。

我正在使用CDN script。

【问题讨论】：

你能展示一下导入的样子吗？
请做一些缩进。看起来很乱
进口：- 我正在使用 CDN 脚本。直接将 react-router 加载为 -

标签： reactjs react-router

【解决方案1】：

你也可以试试

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

(BrowserRouter) 而不是导入路由器

【讨论】：

【解决方案2】：

这不是那样工作的。全局变量不会在 JSX 中神奇地可见。 阅读文档 => 安装包（npm 或 yarn，'react-router-dom'）。

<Router> 是一种顶级（根，应用程序级别）组件 - 它嵌入了更详细的组件。简而言之：

const App = () => (
  <Router>
    <Route path="/" component={<YourMainComponent />}>
    <Route path="/sth" component={<YourSthComponent />}>
  </Router>
)

然后在组件中你将拥有路由道具（props.match）。

【讨论】：

你能通过制作类来解释吗？
你有很多参考和链接到回购与简单的例子。只需运行它，分析，将您的组件放入其中，然后添加参数传递（从路由）。当你不确定它是什么/如何工作时，不要复制粘贴。

【解决方案3】：

import {BrowserRouter as Router, Route} from "react-router-dom"; 除了更新和完成您的工作没有用处之外，不出现该位置错误将很有用，它将显示更多错误。

【讨论】：