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