Reactjs 反应路由器：更改URL但不呈现组件

作为一个反应和材料界面的新手，我对一个路由问题感到绝望

单击按钮时，URL会更改，但由于某些原因，组件不会呈现。我已经尝试了这里提供的关于StackOverflow的几乎所有可能的解决方案。什么都不管用。也许你能找到问题所在

这是我的密码：

import React from 'react'

import { Button } from '@material-ui/core'
import { BrowserRouter } from 'react-router-dom'
import { Link, LinkProps } from 'react-router-dom'

const Spielwiese = React.forwardRef<HTMLAnchorElement, LinkProps>(
  (props, ref) => <Link innerRef={ref as any} {...props} />
)

const Favoriten = React.forwardRef<HTMLAnchorElement, LinkProps>(
  (props, ref) => <Link innerRef={ref as any} {...props} />
)

const LandingPage = () => {
  const classes = useStyles()

  return (
    <div className="App">
      <BrowserRouter>
        <Button
          component={Spielwiese}
          to="/spielwiese"
        >
          Dinge finden!
        </Button>
        <Button
          component={Favoriten}
          to="/favoriten"
        >
          Meine Favoriten!
        </Button>
      </BrowserRouter>
    </div>
  )
}

export default LandingPage

---

提前多谢

嗯，我看不出Spielwiese和Favoriten之间的区别，这可能是原因：？

您必须为BrowserRouter中的每个组件定义路由。否则，您将无法导航应用程序

有关解决方案，请参见沙盒：

此外，您应该将登录页面内容分离到它自己的组件中。然后，您还将为该组件定义一条管线

App.js LandingPage.js

---

@运行时错误请尝试下面我的解决方案，并让我知道这是否有帮助。克里斯托弗·Ngo救援：工作得很好，谢谢！有没有办法去掉下划线？@RuntimeError我相信你可以忽略它：啊，成功了；

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route } from "react-router-dom";
import LandingPage from "./LandingPage";
import Spielwiese from "./Spielwiese";
import Favoriten from "./Favoriten";

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Route component={LandingPage} path="/" exact />
        <Route component={Spielwiese} path="/spielwiese" />
        <Route component={Favoriten} path="/favoriten" />
      </BrowserRouter>
    </div>
  );
};

export default LandingPage;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";
import { Button } from "@material-ui/core";
import { Link } from "react-router-dom";

const LandingPage = () => {
  return (
    <div className="App">
      <Link to="/spielwiese">
        <Button>Dinge finden!</Button>
      </Link>
      <Link to="/favoriten">
        <Button>Meine Favoriten!</Button>
      </Link>
    </div>
  );
};

export default LandingPage;