CODEWITHSUNDEEP
reactjsreact-router
Stotra
Stotra

Reputation: 103

React-Router using <Router> gives :- Cannot read property 'location' of undefined

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.

Upvotes: 0

Views: 695

Answers (3)

brown
brown

Reputation: 33

import {BrowserRouter as Router, Route} from "react-router-dom"; will be useful to not get that location error other than that it is not useful to update and complete your work it will show more errors.

Upvotes: 1

Anil Maharjan
Anil Maharjan

Reputation: 441

Also you can try

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

(BrowserRouter) instead of importing Router

Upvotes: 1

xadm
xadm

Reputation: 8418

This is not working that way. Global variable wouldn't be magically visible inside JSX. Read docs => install packages (npm or yarn, 'react-router-dom').

<Router> is a kind of top (root, app level) components - it embeds more detailed components. In short:

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

Then in components you'll have route props (props.match).

Upvotes: 1

Related Questions