[英]React Router: Changes URL but does not render component
作为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
在此先多谢!
您必须在BrowserRouter
为每个组件定义Routes
。 否则,您将无法浏览您的应用程序。
请参阅沙箱以获取解决方案: https : //codesandbox.io/s/unruffled-flower-to9jd
此外,您应该将LandingPage
内容分成其自己的组件。 然后,您还将为该组件定义一个Route
。
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;
好吧,我看不到Spielwiese和Favoriten之间的区别,这可能是原因:)?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.