const rootEl = document.getElementById('root');
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/">
<MasterPage />
</Route>
<Route exact path="/details/:id" >
<DetailsPage />
</Route>
</Switch>
</BrowserRouter>,
rootEl
);
J'essaie d'accéder au identifiant dans le composant DetailsPage mais il n'est pas accessible. j'ai essayé
<DetailsPage foo={this.props}/>
passer des paramètres à la page de 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>
);
}
}
Vous avez donc une idée de la manière de transmettre l'ID à la page de détails?
Si vous voulez transmettre des accessoires à un composant dans une route, le moyen le plus simple consiste à utiliser le paramètre render
, comme ceci:
<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />
Vous pouvez accéder aux accessoires à l'intérieur de la DetailPage
en utilisant:
this.props.match
this.props.globalStore
Le {...props}
est nécessaire pour transmettre les accessoires de la Route originale, sinon vous obtiendrez seulement this.props.globalStore
à l'intérieur de la DetailPage
.
J'ai utilisé cela pour accéder à l'ID de mon composant:
<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 identifiant dans un h2, espérons que cela aidera quelqu'un.
Utilisez la méthode de rendu:
<Route exact path="/details/:id" render={(props)=>{
<DetailsPage id={props.match.params.id}/>
}} />
Et vous devriez pouvoir accéder à l'id en utilisant:
this.props.id
Dans le composant DetailsPage
Utilisez le composant:
<Route exact path="/details/:id" component={DetailsPage} />
Et vous devriez pouvoir accéder à la id
en utilisant:
this.props.match.params.id
À l'intérieur du composant DetailsPage
Une autre solution consiste à utiliser des crochets d'état et de cycle de vie dans le composant routé et une instruction de recherche dans la propriété to
du composant <Link />
. Les paramètres de recherche sont accessibles ultérieurement 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 voulez ajouter plus d'un argument, utilisez simplement:
<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 TypeScript. 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
interface d'exportation ProblemRouteTokens {problemId: string; }