Javascript 将道具传递给包装在withRouter（）函数中的react组件

我正在使用React路由器v4在我的React应用程序中导航。以下是包装在

withRouter（）

函数中的一个组件，它可以在单击时更改路由：

const LogoName = withRouter(({history, props}) => (
  <h1
    {...props}
    onClick={() => {history.push('/')}}>
    BandMate
  </h1>
));

下面是我如何处理点击。基本上只是设定状态

constructor(){
  super();
  this.state = {
    searchOpen: false
  }
}

handleClick = () => {
  this.setState( {searchOpen: !this.state.searchOpen} );
}

我有没有办法将

道具

传递给包装在

withRouter（）

函数中的组件，或者有没有类似的方法来创建一个能够使用React Router导航并仍能接收道具的组件

---

提前谢谢

你很接近了，只需在你的函数签名中传播道具：

const LogoName = withRouter(({ history, ...props }) => (
  <h1
    {...props}
    onClick={() => {history.push('/')}}>
    BandMate
  </h1>
));

const LogoName=withRouter（{history，…props}）=>(
{history.push（'/'）}>
伴奏
));

问题是，在解构时，您希望

解构道具

，但您没有将任何名为

道具

的道具传递给

LogoName

组件

你可以把你的论点改为

const LogoName = withRouter((props) => (
  <h1
    {...props}
    onClick={() => {props.history.push('/')}}>
    BandMate
  </h1>
));

const LogoName=withRouter（（道具）=>(
{props.history.push（'/'）}>
伴奏
));

但是，您仍然可以使用扩展运算符语法来分解@Danny等道具，如

const LogoName = withRouter(({history, ...props}) => (
  <h1
    {...props}
    onClick={() => {history.push('/')}}>
    BandMate
  </h1>
));

const LogoName=withRouter（{history，…props}）=>(
{history.push（'/'）}>
伴奏
));

这对我很有用：

import  {withRouter} from 'react-router-dom';
class Login extends React.Component
{
   handleClick=()=>{
      this.props.history.push('/page');
   }
   render()
  {
     return(
          <div>
          .......
            <button onClick={this.handleClick()}>Redirect</button>
          </div>);
  }
}

export default withRouter(({history})=>{
  const classes = useStyles();
    return (
        <Login  history={history} classes={classes} />
    )
});

从“react router dom”导入{withRouter}；
类登录扩展了React.Component
{
handleClick=（）=>{
this.props.history.push（'/page'）；
}
render（）
{
返回(
.......
重新使用
);
}
}
使用路由器导出默认值（{history}）=>{
const classes=useStyles（）；
返回(
)
});

这很有道理，谢谢。当我知道这一点后，导航将变得更简单。没问题，很乐意帮助：）@KyleRichardson，我想你误解了我的解释，我的意思是OP写的方式，这意味着他试图从不存在的道具中解构未来道具。我知道丹尼德洛特有另一种方法provided@KyleRichardson如果措辞混乱，你可以编辑我的答案。虽然这段代码可以解决这个问题，但如何以及为什么解决这个问题会真正有助于提高你文章的质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。

import  {withRouter} from 'react-router-dom';
class Login extends React.Component
{
   handleClick=()=>{
      this.props.history.push('/page');
   }
   render()
  {
     return(
          <div>
          .......
            <button onClick={this.handleClick()}>Redirect</button>
          </div>);
  }
}

export default withRouter(({history})=>{
  const classes = useStyles();
    return (
        <Login  history={history} classes={classes} />
    )
});