reactjs - helmet - React. Parámetros del paso del enrutador al componente

react meta tags

Question

const rootEl = document.getElementById(''root'');

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <MasterPage />
            </Route>
            <Route exact path="/details/:id" >
                <DetailsPage />
            </Route>
        </Switch>
    </BrowserRouter>,
    rootEl
);

Estoy intentando acceder al ID en el componente DetailsPage pero no se puede acceder. Lo intenté

<DetailsPage foo={this.props}/>

Pasar parámetros a la página de detalles, pero en vano.

export default class DetailsPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page">
            <Header />
            <div id="mainContentContainer" >

            </div>
            </div>
    );
    }
}

¿Alguna idea de cómo pasar la identificación a la página de detalles?

Answer 1

Además de la respuesta de Alexander Lunas ... Si desea agregar más de un argumento, utilice:

<Route path="/details/:id/:title" component={DetailsPage}/>

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
        <h3>{this.props.match.params.title}</h3>
      </div>
    )
  }
}

Answer 2

Aquí está la versión mecanografiada. funciona en "react-router-dom": "^4.3.1"

export const AppRouter: React.StatelessComponent = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />} />
                <Route path="/" exact component={App} />
            </Switch>
        </BrowserRouter>
    );
};

y componente

export class ProblemPage extends React.Component<ProblemRouteTokens> {

    public render(): JSX.Element {
        return (<div>{this.props.problemId}</div>);
    }
}

donde ProblemRouteTokens

interfaz de exportación ProblemRouteTokens {problemId: string; }

Answer 3

Otra solución es usar un estado y ganchos de ciclo de vida en el componente enrutado y una declaración de búsqueda en la propiedad to del componente <Link /> . Más adelante se puede acceder a los parámetros de búsqueda a través de los new URLSearchParams() ;

<Link 
  key={id} 
  to={{
    pathname: this.props.match.url + ''/'' + foo,
    search: ''?foo='' + foo
  }} />

<Route path="/details/:foo" component={DetailsPage}/>

export default class DetailsPage extends Component {

    state = {
        foo: ''''
    }

    componentDidMount () {
        this.parseQueryParams();
    }

    componentDidUpdate() {
        this.parseQueryParams();
    }

    parseQueryParams () {
        const query = new URLSearchParams(this.props.location.search);
        for (let param of query.entries()) {
            if (this.state.foo!== param[1]) {
                this.setState({foo: param[1]});
            }
        }
    }

      render() {
        return(
          <div>
            <h2>{this.state.foo}</h2>
          </div>
        )
      }
    }

Answer 4

Si desea pasar apoyos a un componente dentro de una ruta, la forma más sencilla es utilizar el render siguiente manera:

<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />

Puedes acceder a los accesorios dentro de la DetailPage usando:

this.props.match
this.props.globalStore

Los {...props} son necesarios para pasar los props de la Ruta original, de lo contrario solo obtendrás this.props.globalStore dentro de la DetailPage .

Answer 5

Usa el componente:

<Route exact path="/details/:id" component={DetailsPage} />

Y deberías poder acceder a la id usando:

this.props.params.id

Dentro del componente DetailsPage

Answer 6

Utilicé esto para acceder a la ID en mi componente:

<Route path="/details/:id" component={DetailsPage}/>

Y en el componente de detalle:

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}

Esto hará que cualquier ID dentro de un h2, espero que ayude a alguien.

Answer 7

Utilice el método de render:

<Route exact path="/details/:id" render={(props)=>{
    <DetailsPage id={props.match.params.id}/>
}} />

Y deberías poder acceder a la identificación usando:

this.props.id

Dentro del componente DetailsPage