使用 react-router-dom 重定向 onclick 事件

Question

我想使用router-react-dom. 我创建了一个这样的函数：const {id} = props;  const redirect = () => {    console.log("redirecting...");    const url = `/${id}`;    return <Redirect to={url} />;  };然后我像这样为其他组件制作道具：      <BtnDetalii        clickFn={redirect}        text="apasa aici pentru mai multe detalii"      />这是我的 btnDetalii 组件const BtnDetalii = props => (  <div onClick={() => props.clickFn()} className="detalii">    {props.text}  </div>);当我点击按钮不起作用。我错过了什么？

Answer 1

你可以使用 React Router v4。withRouter用from包裹你的组件，react-router-dom这样你就可以访问historyprop. 之后，您可以为您的道具push添加新网址。history

我不确定您的redirect函数所在的父组件中的代码是什么，但这是一个使用withRouter. 如果您共享更多组件，我可以更改代码段并添加您的代码。

import React from "react";

import { withRouter } from "react-router-dom";

import BtnDetalii from "./BtnDetalii";

const Card = withRouter(({ history, ...props }) => {

    const redirect = () => {

        console.log("redirecting...");

        const id = props.id;

        const url = `detalii/${id}`;

        history.push(url);

    };

    return (

        <div className="today">

        <div className="data">{props.nume}</div>

        <img src={props.poza} className="img-icon" alt="poza" />

        <p className="text">{props.strada}</p>

        <BtnDetalii

            clickFn={redirect}

            text="apasa aici pentru mai multe detalii"

        />

        </div>

    );

});

export default Card;

Answer 2

检查此示例以获取功能组件，您可以阅读文档以更好地理解。

import { useHistory } from "react-router-dom";

function HomeButton() {

  let history = useHistory();

  function handleClick() {

    history.push("/home");

  }

  return (

    <button type="button" onClick={handleClick}>

      Go home

    </button>

  );

}