I am creating web app. I am now trying to use `react-router` to my existing js file. However using just `<Router>` gives me this error :- 

> 
> react-dom.development.js:11536 Uncaught TypeError: Cannot read
>  property 'location' of undefined
> 
> 
> 

```
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>
  );
}

```

Inclusion of `<Router></Router>` gives me this error.

I am using `CDN script`.