[react]動的ルーティング(match)
4567 ワード
どうてきルーティング
urlパラメータを使用して動的にルーティングする機能=>後のurlに基づいて異なる値を表示します.
history、location、matchの3つのコンポーネントを使用して動的ルーティングを行うことができます.
<Route exact path="/monsters/detail/:id" component={MonsterDetail} />```fetch(
`https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
)
.then((res) => res.json())
.then((res) =>
this.setState({
data: res,
})
); ``` componentDidUpdate(prevProps) {
if (prevProps.match.params.id !== this.props.match.params.id) {
this.getData();
}
}```
- 이렇게 유동적으로 id값을 변경시켜서 사용자가 클릭한 내용을 렌더해 보여줄 수 잇따.
Reference
この問題について([react]動的ルーティング(match)), 我々は、より多くの情報をここで見つけました https://velog.io/@kangko05/react동적-라우팅-matchテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol