TypeError: Cannot read property 'location' of undefined in react

I am creating a simple React application, and while implementing Routing I get following error:

TypeError: Cannot read property 'location' of undefined in react.

App.js:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Header from "./components/header";

import Home from "./components/Home";

import About from "./components/About";

import Contact from "./components/Contact";

import { Router, Route} from 'react-router'



class App extends Component {

  render() {

    return (

      <div className="App">

      <Header />



   <Router>

      <Route path = "/" component = {App}>

         <Route path = "home" component = {Home} />

         <Route path = "about" component = {About} />

         <Route path = "contact" component = {Contact} />

      </Route>

   </Router>

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <p>



            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

            Learn React

          </a>

        </header>

      </div>

    );

  }

}



export default App;

What am I missing here?

edited Nov 15 '18 at 4:54

asked Nov 15 '18 at 4:46

amba patel

675213

1

Where have you used location in the app?

– Ashish Kirodian
Nov 15 '18 at 4:57

add a comment |

I am creating a simple React application, and while implementing Routing I get following error:

TypeError: Cannot read property 'location' of undefined in react.

App.js:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Header from "./components/header";

import Home from "./components/Home";

import About from "./components/About";

import Contact from "./components/Contact";

import { Router, Route} from 'react-router'



class App extends Component {

  render() {

    return (

      <div className="App">

      <Header />



   <Router>

      <Route path = "/" component = {App}>

         <Route path = "home" component = {Home} />

         <Route path = "about" component = {About} />

         <Route path = "contact" component = {Contact} />

      </Route>

   </Router>

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <p>



            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

            Learn React

          </a>

        </header>

      </div>

    );

  }

}



export default App;

What am I missing here?

edited Nov 15 '18 at 4:54

asked Nov 15 '18 at 4:46

amba patel

675213

1

Where have you used location in the app?

– Ashish Kirodian
Nov 15 '18 at 4:57

add a comment |

I am creating a simple React application, and while implementing Routing I get following error:

TypeError: Cannot read property 'location' of undefined in react.

App.js:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Header from "./components/header";

import Home from "./components/Home";

import About from "./components/About";

import Contact from "./components/Contact";

import { Router, Route} from 'react-router'



class App extends Component {

  render() {

    return (

      <div className="App">

      <Header />



   <Router>

      <Route path = "/" component = {App}>

         <Route path = "home" component = {Home} />

         <Route path = "about" component = {About} />

         <Route path = "contact" component = {Contact} />

      </Route>

   </Router>

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <p>



            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

            Learn React

          </a>

        </header>

      </div>

    );

  }

}



export default App;

What am I missing here?

edited Nov 15 '18 at 4:54

asked Nov 15 '18 at 4:46

amba patel

675213

I am creating a simple React application, and while implementing Routing I get following error:

TypeError: Cannot read property 'location' of undefined in react.

App.js:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Header from "./components/header";

import Home from "./components/Home";

import About from "./components/About";

import Contact from "./components/Contact";

import { Router, Route} from 'react-router'



class App extends Component {

  render() {

    return (

      <div className="App">

      <Header />



   <Router>

      <Route path = "/" component = {App}>

         <Route path = "home" component = {Home} />

         <Route path = "about" component = {About} />

         <Route path = "contact" component = {Contact} />

      </Route>

   </Router>

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <p>



            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

            Learn React

          </a>

        </header>

      </div>

    );

  }

}



export default App;

What am I missing here?

reactjs

edited Nov 15 '18 at 4:54

asked Nov 15 '18 at 4:46

amba patel

675213

edited Nov 15 '18 at 4:54

asked Nov 15 '18 at 4:46

amba patel

675213

edited Nov 15 '18 at 4:54

asked Nov 15 '18 at 4:46

amba patel

675213

asked Nov 15 '18 at 4:46

amba patel

675213

asked Nov 15 '18 at 4:46

amba patel

675213

1

Where have you used location in the app?

– Ashish Kirodian
Nov 15 '18 at 4:57

add a comment |

1

Where have you used location in the app?

– Ashish Kirodian
Nov 15 '18 at 4:57

Where have you used location in the app?

– Ashish Kirodian
Nov 15 '18 at 4:57

add a comment |

1 Answer
1

active

oldest

votes

The problem here seems to be with import of router package.

install: npm install --save react-router-dom

Import the package in your App.js as:

import { BrowseRouter, Route } from "react-router-dom";

And now modify your App.js render() function as-

 return (

  <BrowseRouter>

      <div className="App">

      <Header />



        <Route exact path = "/" component = {Home} />

        <Route path = "about" component = {About} />

        <Route path = "contact" component = {Contact} />





      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>



          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

          Learn React

        </a>

      </header>

    </div>

  </BrowseRouter>

);

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312566%2ftypeerror-cannot-read-property-location-of-undefined-in-react%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The problem here seems to be with import of router package.

install: npm install --save react-router-dom

Import the package in your App.js as:

import { BrowseRouter, Route } from "react-router-dom";

And now modify your App.js render() function as-

 return (

  <BrowseRouter>

      <div className="App">

      <Header />



        <Route exact path = "/" component = {Home} />

        <Route path = "about" component = {About} />

        <Route path = "contact" component = {Contact} />





      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>



          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

          Learn React

        </a>

      </header>

    </div>

  </BrowseRouter>

);

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

add a comment |

The problem here seems to be with import of router package.

install: npm install --save react-router-dom

Import the package in your App.js as:

import { BrowseRouter, Route } from "react-router-dom";

And now modify your App.js render() function as-

 return (

  <BrowseRouter>

      <div className="App">

      <Header />



        <Route exact path = "/" component = {Home} />

        <Route path = "about" component = {About} />

        <Route path = "contact" component = {Contact} />





      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>



          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

          Learn React

        </a>

      </header>

    </div>

  </BrowseRouter>

);

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

add a comment |

The problem here seems to be with import of router package.

install: npm install --save react-router-dom

Import the package in your App.js as:

import { BrowseRouter, Route } from "react-router-dom";

And now modify your App.js render() function as-

 return (

  <BrowseRouter>

      <div className="App">

      <Header />



        <Route exact path = "/" component = {Home} />

        <Route path = "about" component = {About} />

        <Route path = "contact" component = {Contact} />





      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>



          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

          Learn React

        </a>

      </header>

    </div>

  </BrowseRouter>

);

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

The problem here seems to be with import of router package.

install: npm install --save react-router-dom

Import the package in your App.js as:

import { BrowseRouter, Route } from "react-router-dom";

And now modify your App.js render() function as-

 return (

  <BrowseRouter>

      <div className="App">

      <Header />



        <Route exact path = "/" component = {Home} />

        <Route path = "about" component = {About} />

        <Route path = "contact" component = {Contact} />





      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>



          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">

          Learn React

        </a>

      </header>

    </div>

  </BrowseRouter>

);

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

answered Nov 15 '18 at 5:01

Reema Parakh

1,173521

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky