React路由器错误“无法读取未定义的属性‘位置’”

Question

我试图路由到另一个页面，但是在这个路径app/start上有一条错误消息。我做了一个开始按钮，如果用户点击开始按钮，它应该路由到开始页面，但它没有。

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

我不明白我在哪里犯了错误。rhe错误消息的截图：

在这里输入图像描述

我单击按钮，然后打开错误页，而不是开始页。我怎么才能解决这个问题？

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>