[英]Navigate between pages in React js
I'm trying to implement a button that when clicked change to another screen in React Js but when I try to use it, it give me an errror: TypeError: Cannot read property 'push' of undefined
.我正在尝试实现一个按钮,当在 React Js 中单击该按钮时会更改到另一个屏幕,但是当我尝试使用它时,它给了我一个
errror: TypeError: Cannot read property 'push' of undefined
。 I don't know what else to do.我不知道还能做什么。 What I'm doing wrong?
我做错了什么? Thanks
谢谢
import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { Switch, Route } from "react-router-dom";
const Link = (props) => {
const addOrEditLink = async (linkObject) => {
await db.collection("links").doc().set(linkObject);
console.log("New Task Added");
};
return (
<div>
<LinkForm addOrEditLink={addOrEditLink} />
<button
onClick={() => {
props.history.push("/Links");
}}
>
Go Home
</button>
</div>
);
};
export default Link;
Wrapp your component with withRouter HOC, which will pass updated match, location, and history props to the wrapped component whenever it renders.使用 withRouter HOC 包装您的组件,它会在渲染时将更新的匹配、位置和历史道具传递给包装的组件。
https://reactrouter.com/web/api/withRouter https://reactrouter.com/web/api/withRouter
import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { Switch, Route } from "react-router-dom";
import { withRouter } from "react-router";
const Link = (props) => {
const addOrEditLink = async (linkObject) => {
await db.collection("links").doc().set(linkObject);
console.log("New Task Added");
};
return (
<div>
<LinkForm addOrEditLink={addOrEditLink} />
<button
onClick={() => {
props.history.push("/Links");
}}
>
Go Home
</button>
</div>
);
};
export default withRouter(Link);
You don't have the history by default.默认情况下您没有历史记录。 You can get it by using "useHistory" or "withRouter" HOC.
您可以使用“useHistory”或“withRouter” HOC 来获取它。
Example for "useHistory": “useHistory”示例:
import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { useHistory } from "react-router-dom";
const Link = (props) => {
const addOrEditLink = async (linkObject) => {
await db.collection("links").doc().set(linkObject);
console.log("New Task Added");
};
const history = useHistory();
return (
<div>
<LinkForm addOrEditLink={addOrEditLink} />
<button
onClick={() => {
history.push("/Links");
}}
>
Go Home
</button>
</div>
);
};
export default withRouter(Link);
But anyway it's not a good UX-wise approach.但无论如何,这不是一个好的用户体验方法。 I recommend using react router "Link" like this:
我建议像这样使用反应路由器“链接”:
import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { Link as ReactRouterLink } from "react-router-dom";
const Link = (props) => {
const addOrEditLink = async (linkObject) => {
await db.collection("links").doc().set(linkObject);
console.log("New Task Added");
};
return (
<div>
<LinkForm addOrEditLink={addOrEditLink} />
<ReactRouterLink to="/Links"> // or you mean `/${Link}`
Go Home
</button>
</div>
);
};
export default Link;
By using react-router Link you'll have an <a />
so the user will be able to open that link as a new tab in his/her browser too.通过使用 react-router Link,您将拥有一个
<a />
因此用户也可以在他/她的浏览器中将该链接作为新选项卡打开。 Also better SEO!还有更好的SEO!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.