React Router：更改 URL 但不呈现组件

Question

作为 React 和 Material-UI 的新手，我对路由问题感到绝望。

单击按钮时，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

提前非常感谢！

Answer 1

您必须在BrowserRouter 中为每个组件定义Routes。否则，您将无法浏览您的应用程序。

查看沙盒解决方案：https://codesandbox.io/s/unruffled-flower-to9jd

此外，您应该将LandingPage 内容分离到它自己的组件中。然后，您还将为该组件定义一个Route。

App.js

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

LandingPage.js

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;

Answer 2

好吧，我看不出Spielwiese和Favoriten之间的区别，这可能是原因:)？