Ошибка React-Router "Невозможно прочитать свойство 'location' из undefined"

Question

Я пытаюсь перейти на другую страницу, но по этому пути появляется сообщение об ошибке app/start. Я сделал кнопку запуска, и если пользователь нажимает на кнопку запуска, он должен направить на стартовую страницу, но это не так.

Приложение. js коды:

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

и Start. js коды:

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;

и index. js коды:

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();

Я не понимаю, где я допустил ошибку. Снимок экрана с сообщением об ошибке:

введите описание изображения здесь

Я нажал кнопку, после чего вместо начальной страницы открывается страница с ошибкой. Как я могу это исправить?

Answer 1

В вашем компоненте приложения вы просто смешиваете самозакрывающийся компонент маршрута с другим компонентом маршрута. Решение ниже.

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

ИЛИ

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