React Router passe Param au Component
const rootEl = document.getElementById('root');
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/">
<MasterPage />
</Route>
<Route exact path="/details/:id" >
<DetailsPage />
</Route>
</Switch>
</BrowserRouter>,
rootEl
);
je suis en train de l'accès à l' id dans la composante DetailsPage mais elle n'est pas accessible. J'ai essayé
<DetailsPage foo={this.props}/>
pour passer les paramètres à la page des détails, mais en vain.
export default class DetailsPage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="page">
<Header />
<div id="mainContentContainer" >
</div>
</div>
);
}
}
alors une idée de comment passer L'ID sur la page des détails ?
7 réponses
Si vous souhaitez passer des accessoires à un composant à l'intérieur d'un itinéraire, le plus simple est d'utiliser le render, comme ceci:
<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />
vous pouvez accéder aux accessoires à l'intérieur du DetailPage utilisation:
this.props.match
this.props.globalStore
{...props} est nécessaire pour passer l'origine de l'Itinéraire accessoires, sinon vous n'obtiendrez this.props.globalStore à l'intérieur du DetailPage.
j'ai utilisé ceci pour accéder à L'ID dans mon component:
<Route path="/details/:id" component={DetailsPage}/>
et dans la composante de détail:
export default class DetailsPage extends Component {
render() {
return(
<div>
<h2>{this.props.match.params.id}</h2>
</div>
)
}
}
cela rendra n'importe quel ID à l'intérieur d'un h2, espoir qui aide quelqu'un.
Utiliser la méthode de rendu:
<Route exact path="/details/:id" render={(props)=>{
<DetailsPage id={props.match.params.id}/>
}} />
Et vous devriez être en mesure d'accéder à l'id à l'aide de:
this.props.id
à l'Intérieur de la DetailsPage composant
Utiliser le composant:
<Route exact path="/details/:id" component={DetailsPage} />
Et vous devriez être en mesure d'accéder à l' id utilisation:
this.props.params.id
à l'intérieur du DetailsPage composant
une autre solution consiste à utiliser un état et des crochets de cycle de vie dans le composant routé et une instruction de recherche dans le to propriété du <Link /> composant. Les paramètres de recherche peuvent ensuite être accessible via 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>
)
}
}
en plus de la réponse D'Alexander Lunas ... Si vous souhaitez ajouter plus d'un argument suffit d'utiliser:
<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>
)
}
}
Voici la version dactylographiée. fonctionne sur "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>
);
};
et composant
export class ProblemPage extends React.Component<ProblemRouteTokens> {
public render(): JSX.Element {
return (<div>{this.props.problemId}</div>);
}
}
où ProblemRouteTokens
export interface ProblemRouteTokens { problemId: string;}