実現したいこと
ReactとWP REST APIでWebアプリを作成しています。
WP REST APIから受け取ったwordpress(ローカル環境)のJsonデータにあるidをkeyとしてReact側で
componentDidMountを使ってデータをマッピングし、投稿一覧を作成しました。(Home.jsx)
この投稿一覧の中にある"Link"「view more」からそれぞれのIDと紐づいたコンテンツPostPage.jsxに
表示したいのですが、コンポーネントと紐付けたり、ルーティングさせる方法がわかりません。
現状、「view more」に設定したLinkをクリックすると「localhost:3000/post/65」などの
URLには切り替わります。
動的なURLを表示するにはどのようにすれば良いでしょうか?
ご教示のほどよろしくお願いいたします。
環境とディレクトリはこのようになっています。
環境とディレクトリ構成
react-create-app
react-router@5.2.0
react-router-dom@^5.2.0
src
├─ componant
│ ├─ Home.jsx
│ ├─ Navbar.jsx
│ ├─ PostPage.jsx
│
├─ App.js
Home.jsx
import React from 'react'; import PostPage from './PostPage'; class Home extends React.Component { constructor(props) { super(props) this.state = { loading:false, posts: [], error:'' }; } async componentDidMount () { const response = await fetch('http://localhost:8888/admin/wordpress/wp-json/wp/v2/posts?_embed'); const posts = await response.json(); this.setState({ posts: posts, }); } render() { return ( <div> <div> <Container> <> <h2>投稿一覧</h2> </> <Box> { this.state.posts.map(item => ( <Post key={item.id}> <> </> <> <Thumbnail> <img src={ item.featured_image.src } alt=""/> </Thumbnail> </> <PostContent> <div> <Tittle> {item.title.rendered} </Tittle> </div> <> {/* link ここから個別ページにルーティングしたい */} <p><Link to={`/post/${item.id}`}>view more</Link></p> </> </PostContent> </Post> )) } </Box> <div> </div> </Container> </div> </div> ) } } export default Home;
PostPage.jsx
import React from 'react'; import { BrowserRouter, Route, Link, Switch } from "react-router-dom"; class PostPage extends React.Component { constructor(props) { super(props) this.state = { loading:false, posts: [], error:'' }; } async componentDidMount () { const response = await fetch('http://localhost:8888/admin/wordpress/wp-json/wp/v2/post?_embed'); const posts = await response.json(); this.setState({ posts: posts, }); } render() { return ( <div> <div> <> </> { this.state.posts.map(item => ( <div key={item.id}> <> <div dangerouslySetInnerHTML={{ __html: item.content.rendered }}></div> </> </div> )) } <div> </div> </div> </div> ) } } export default PostPage;
App.js
mport React from 'react'; import './App.css'; import { Component } from 'react'; import { BrowserRouter, Route, Link, Switch } from "react-router-dom"; // Call componant import Home from "./componant/Home"; import Navbar from './componant/Navbar'; import PostPage from './componant/PostPage'; class App extends Component { render(){ return ( <BrowserRouter> <div id="root"> <Navbar /> <Route path="/" component={Home}></Route> <Route exact path="/post/:id" component={this.PostPage}></Route> </div> </BrowserRouter> ) } } export default App;
あなたの回答
tips
プレビュー