如何在按钮单击时重定向到另一个页面答案

【问题标题】：How to redirect on button click to another page如何在按钮单击时重定向到另一个页面
【发布时间】：2020-05-08 12:11:27
【问题描述】：

我是 React 的新手，我正在尝试制作一个包含图片和按钮的页面来进入网站。单击该按钮后，您应该会被重定向到主页内以及带有导航栏的经典站点。

我尝试的是使用历史记录和按钮的 onClick 也使用 React 路由 dom 功能回家，但我无法从第一页导航到主页。

我做了什么我首先在我的 index.js 上设置了路由器

<React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,

然后我在我的 App.js 中添加了

 <Router history={history}>
        <Switch>
          <Main />
          <Route path="/home" component={Home} exact />
        </Switch>
      </Router>

之后我尝试在我的 PodCard 组件中设置按钮如下

const PodCard = (props) => {
  const { title, url, hdurl, explanation, date, copyright } = props.data;

  const routeChange = () => {
    let path = `home`;
    history.push(path);
  };

  return (
    <>
      <img src={url} alt={title} />
      <Button onClick={routeChange}>Enter</Button>
    </>
  );
};

export default PodCard;

PodCard 已导入我的主页中，显示欢迎页面

import React, { Component } from "react";
import { getPod } from "../../API";
import PodCard from "../../Components/Pod";

export default class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      podData: [],
      isFetching: false,
      isLoading: true,
      error: null,
    };
  }

  componentDidMount = async () => {
    const podData = await getPod();
    this.setState({
      isFetching: true,
      isLoading: false,
      podData: podData,
    });
    console.log("POD State >> ", this.state.podData);
  };

  render() {
    const { podData, isLoading } = this.state;
    return isLoading ? <h1>LOADING...</h1> : <PodCard data={podData} />;
  }
}

我想了解我在这里做错了什么，以及如何从我的 Main 导航到单击按钮到主页，我的网站实际上会从导航栏开始。

【问题讨论】：

你试过了吗：let path = "/home"
您是否在单击时收到未定义的历史记录？ history 是在 props 中发送的对象。您可能还需要使用 export default withRouter(PodCard) 才能在 PodCard 中访问历史记录。
我个人会从react-router-dom 调查Link。您可以按照与按钮相同的方式设置它的样式，并执行您正在寻找的功能。
我尝试使用 /home 作为路径。我改变了
我也尝试了链接，但也没有成功

标签： javascript reactjs

【解决方案1】：

要链接到主页，你可以这样写：

<Route path="/home" />

在 Podcard 中的下一步，你可以像这样修改箭头函数 routeChange：

const routeChange = () => {
  Router.push({ pathname:'/home' })
 };

不要忘记在 Podcard 中导入路由器我希望这会有所帮助:)

【讨论】：

我在我的文件中做了回家的路线，如我的问题所示，但也以这种方式没有发生任何事情
顺便说一句，你的解决方案给出了一个错误 TypeError: react_router_dom__WEBPACK_IMPORTED_MODULE_2__.Router.push is not a function
你的路由器是什么版本的？？
"react-router": "^5.1.2", "react-router-dom": "^5.1.2",