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错误消息的屏幕截图：

enter image description here

我单击按钮，然后打开错误页面，而不是开始页面。我该如何解决？

Answer 1

在您的App组件中，您只是将自动关闭的Route组件与其他Route组件混合在一起。解决方法如下。

<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>

反应路由器错误“无法读取未定义的属性'位置'”

1 个答案: