react-router obteniendo this.props.location en componentes secundarios

Contamos con la mejor solución que encontramos en internet. Deseamos que te sea de mucha ayuda y si quieres comentarnos cualquier detalle que nos pueda ayudar a mejorar hazlo libremente.

Solución:

(Actualización) V5.1 y Hooks (Requiere React >= 16.8)

Puedes usar useHistory, useLocation y useRouteMatch en su componente para obtener match, history y location .

const Child = () => 
  const location = useLocation();
  const history = useHistory();
  const match = useRouteMatch("write-the-url-you-want-to-match-here");

  return (
    
location.pathname
  )


export default Child

(Actualización) V4 y V5

Puedes usar withRouter HOC para inyectar match, history y location en sus accesorios de componentes.

class Child extends React.Component 
  static propTypes = 
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  

  render() 
    const  match, location, history  = this.props

    return (
      
location.pathname
    )
  


export default withRouter(Child)

(Actualización) V3

Puedes usar withRouter HOC para inyectar router, params, location, routes en sus accesorios de componentes.

class Child extends React.Component 

  render() 
    const  router, params, location, routes  = this.props

    return (
      
location.pathname
    )
  


export default withRouter(Child)

respuesta original

Si no desea usar los accesorios, puede usar el contexto como se describe en la documentación de React Router

En primer lugar, debe configurar su childContextTypes y getChildContext

class App extends React.Component

  getChildContext() 
    return 
      location: this.props.location
    
  

  render() 
    return ;
  


App.childContextTypes = 
    location: React.PropTypes.object

Luego, podrá acceder al objeto de ubicación en sus componentes secundarios usando un contexto como este

class Child extends React.Component

   render() 
     return (
       
this.context.location.pathname
     )
   



Child.contextTypes = 
    location: React.PropTypes.object
 

Si la solución anterior no funcionó para usted, puede usar import withRouter from 'react-router-dom';

---

Usando esto, puede exportar su clase secundaria como:

class MyApp extends Component
    // your code


export default withRouter(MyApp);

Y tu clase con Router –

// your code

      ...
      
      // or if you are sending additional fields
       />

Recuerda que tienes concesión de interpretar tu experiencia .

---

---

Utiliza Nuestro Buscador