Блог

Я хочу вставить некоторый текст в URL-маршрут в методе onChange для ввода, подобном этому :

 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 или как я могу вставить некоторый текст для маршрутизации url вручную из любого места в react?

Сообщение об ошибке предполагает, что history prop является 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 см.:

• React Router — перехват истории использования
• React Router — withRouter