2

A través de <Route>, dirijo a distintos componentes. En uno de ellos necesito pasar un parámetro, y lo hago de esta forma:

const AppRoutes = () =>

      <Switch>
        <Route path='/:slug' component={Articulo} />
        <Route exact path='/' component={App} />
        <Route component={Page404} />
      </Switch>


export default AppRoutes;

El componente <articulo> lo he creado en un fichero aparte, pero algo estoy haciendo mal y no sé el qué. El fichero lo tengo así:

import React, { Component } from 'react';

class Articulo extends Component {

  render() {
    return (<h2>Este es el slug del artículo: {match.params.slug}</h2>)
  }

}

export default Articulo;

Sin embargo, me devuelve un error:

'match' is not defined no-undef

Todos la documentación que he encontrado crear el componente en el mismo fichero de esta forma:

const Articulo = () => (
  <h1>Este es el slug: {match.params.slug}</h1>
)

De esta forma no habría problema, pero necesito hacerlo en un componente separado.

5
  • 1
    Las variables de ruta se acceden mediante properties, es decir: this.props.match.params. Deberia ser this.props.match.slug en lugar de match.params.slug el 11 jul. 2018 a las 2:32
  • @MarcosMartínez ¡Muchas gracias! Me ha servido.
    – user27826
    el 11 jul. 2018 a las 7:48
  • JetLagFox, creo puedes eliminar la pregunta al ser producto de un error tipográfico.
    – gugadev
    el 13 jul. 2018 a las 15:07
  • @MarcosMartínez toda propiedad de una clase debe accederse por medio de this. En versiones futuras de ECMAScript no será necesario.
    – gugadev
    el 13 jul. 2018 a las 15:08
  • Agradezco la info pero no lo veo relativo a la pregunta del OP. Saludos el 13 jul. 2018 a las 19:39

1 respuesta 1

0

El componente router de react-router le pasa a tu componente una serie de propiedades, las cuales puedes acceder a ellas desde tu componente de clase como this.props.match, en un componente funcional solo pones props Cómo argumento const Componente=(props)=>(...)

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies