如何在按鈕單擊時重定向到另一個頁面

Question

我是 React 的新手，我正在嘗試制作一個包含圖片和按鈕的頁面來進入網站。 單擊該按鈕后，您應該會被重定向到主頁內以及帶有導航欄的經典站點。

我嘗試的是使用歷史和 onClick 按鈕 go 主頁也使用 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 導航到單擊按鈕到主頁，我的網站實際上將從導航欄開始。

Answer 1

要鏈接到主頁，您可以這樣寫：

<Route path="/home" />

在 Podcard 中的下一步，您可以像這樣修改箭頭 function routeChange：

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

不要忘記在 Podcard 中導入路由器我希望這會有所幫助:)