javascript - ReactJS Router-如何在带参数的功能组件中使用历史推送？

Question

我在使用 history.push("path/...") 时遇到问题在一个功能组件中。我的问题是当我尝试在按钮处理程序中使用功能组件的参数时。我有下一个代码:Example.js

...
import {useHistory} from 'react-router-dom';
...

//This function works fine, but i would prefer something reusable
function Button() {
    const history = useHistory();
    function handle(){
        history.push("/path"); //The path is harcoded
    }
    return(
        <button onClick={handle}>
            Home //This text is harcoded
        </button>
    );
}

//This is what i'm looking for, because i would write it once.
function Button(path, text) {
    const history = useHistory();
    function handle(){
        history.push(path); //This doesn't work
    }
    return(
        <button onClick={handle}>
            {text} //This throws an error "no valid react child"
        </button>
    );
}

//this component is being render as a child of BrowserRouter
class Example extends Component{
    render(){
        return(
            <div>
                <Button path="path/..."/>
            </div>
        );
    }
}

export ...

这是我的实际代码，只是删除了重复的行。使用第一个功能组件我没有问题，但是，我需要为每个按钮创建一个新的功能组件。相反，我正在寻找一种方法来编写一次此函数并使用它来创建许多按钮。
当路径通过 Prop 传递时，第二个函数什么也不做，如果我添加 console.log(path)在 handle() ，路径值在正确传递时打印，但 history.push(path)不接受。
我想补充一点，我唯一的线索是 push 方法文档，该方法采用的类型是 string , 但是 any正在通过。

Answer 1

React 组件只接收一个参数，即 props 对象。你假设两个。

function Button(path, text) {
  const history = useHistory();
  function handle(){
    history.push(path); // This doesn't work
  }
  return(
    <button onClick={handle}>
      {text} // This throws an error "no valid react child"
    </button>
  );
}

应该

function Button({ path, text }) {
  const history = useHistory();
  function handle(){
    history.push(path); // This should work now
  }
  return(
    <button onClick={handle}>
      {text} // This should render now
    </button>
  );
}

注意这里传递的 Prop 是从 props 解构的。目的。