时间戳

首页 > 解决方案 > 如何在反应 js 中将值推送到 url？

javascript - 如何在反应 js 中将值推送到 url？

问题描述

我想在这样的输入的 onChange 方法中将一些文本推送到 url 路由：

function Header(props) {
 return (
  <div>
     <input type="radio" onChange={ (e)=> props.history.push(`/${e.target.value}`) } >
  </div>
)

但它会引发多个错误和崩溃：

TypeError: Cannot read property 'push' of undefined

如何正确使用 history.push 或如何从 react 中的任何位置手动推送一些文本以路由 url？

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

错误消息表明historyprop is undefined，这意味着它没有作为 prop 传递给您的组件，这可能取决于您的应用程序中组件的层次结构。

使用以下选项之一来访问history：

  • 使用useHistory钩子

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

function Header(props) {
   const routerHistory = useHistory();

   return (
    <div>
       <input type="radio" onChange={(e)=> routerHistory.push(`/${e.target.value}`)}>
    </div>
  )
}

  • 使用withRouter高阶组件

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

function Header(props) {
   return (
    <div>
       <input type="radio" onChange={(e)=> props.history.push(`/${e.target.value}`)}>
    </div>
  )
}

export default withRouter(Header);

有关withRouter和的详细信息useHistory，请参阅：

推荐阅读