React-Router Error "Cannot read property 'location' of undefined"

Question

I try to route to another page but there is an error message at this path app/start. I made a start button,and if user click on the start button it should route to start page but it doesn't.

App.js codes :

import React from "react";
import "./styles.css";
import Particles from "react-particles-js";
import styled, { keyframes } from "styled-components";
import { bounce } from "react-animations";
import { Link, Route } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
import Rout from "./Router";
import Start from "./Start";

const Bounce = styled.div`
  animation: 2s ${keyframes`${bounce}`} infinite;
`;
const particleOpt = {
  particles: {
    number: {
      value: 180,

      density: {
        enable: false,
        value_area: 500
      }
    }
  }
};
export default function App() {
  return (
    <Router>
      <div className="App">
        <Route path="/" component={App}>
          <Route path="/start" component={Start} />
        </Route>

        <Particles params={particleOpt} />

        <Bounce>
          <h2 className="h2">
            {" "}
            <button>
              <Link to="/start">Start </Link>
            </button>
            <Rout />
          </h2>{" "}
        </Bounce>
      </div>
    </Router>
  );
}

and Start.js codes :

import React, { Component } from "react";
import "./styles.css";

class Start extends Component {
  render() {
    return (
      <div className="Start">
        <h3> START PAGE</h3>
      </div>
    );
  }
}
export default Start;

and index.js codes :

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import registerServiceWorker from "./registerServiceWorker";

import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
registerServiceWorker();

I don't understand where I have made an error. Screenshot of rhe error message:

enter image description here

I clicked button then the error page is opened instead of the start page. How can I fix this?

Zohaib · Accepted Answer · 2020-03-30 17:11:01Z

1

In your App component you are just mixing self closing Route Component with other Route component. Solution is below.

<Router>
  <div className="App">
    <Route path="/" component={App} />
    <Route path="/start" component={Start} />
</Router>

OR

  <Router>
    <div className="App">
      <Route path="/" component={App}></Route>
      <Route path="/start" component={Start}></Route>
  </Router>

answered Mar 30, 2020 at 17:11

Zohaib

1,03710 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Router Error "Cannot read property 'location' of undefined"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related