質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Q&A

解決済

1回答

526閲覧

React Redux 記事IDに紐づく詳細記事を表示させたい

anpanchi

総合スコア5

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

0グッド

0クリップ

投稿2023/07/24 06:47

実現したいこと

  • 動的ルーティングを使用して、記事詳細ページに、記事ID(postId)に紐づく、それぞれの記事を表示させたい

前提

Reactルーティングで簡単なページを作成しています。
App.jsx
Top.jsx
Posts.jsx(記事一覧ページ)
Post.jsx(記事詳細ページ)
Store.js(Redux)
記事一覧ページに表示している記事のIdに紐づいた記事を、動的ルーティングを使用して、記事詳細ページに表示させたいです。
記事はRedux(Store.js)で管理しています。

発生している問題・エラーメッセージ

Idの紐付け方が分かりません。

該当のソースコード

import "./reset.css" import AppStyle from "./App.module.css" import { Routes, Route, Link } from "react-router-dom"; import Top from "./components/pages/top/Top"; import Posts from "./components/pages/posts/Posts"; import Post from "./components/pages/post/Post"; function App() { return ( <div className={AppStyle.container}> <h1>React 7回目</h1> <nav className={AppStyle.nav}> <ul className={AppStyle.menu}> <li><Link to="/top">TOP</Link></li> <li><Link to="/Posts">記事一覧</Link></li> <li><Link to="/Post">記事詳細</Link></li> </ul> </nav> <Routes> <Route path="/top" element={ <Top /> }></Route> <Route path="/posts" element={ <Posts /> }></Route> <Route path=":postId" element={ <Post /> }></Route> </Routes> </div> ) } export default App
import postsStyle from "./posts.module.css" import { useSelector } from 'react-redux'; const Posts =() => { const posts = useSelector((state) => state.posts); return ( <div className={postsStyle.container}> <h2>記事一覧</h2> <div className={postsStyle.posts}> {posts.map((post) => ( <div className={postsStyle.post} key={post.postId}>{post.postName} <p className={postsStyle.post_text} key={post.postId}>{post.postDetail}</p> </div> ))} </div> </div> ) } export default Posts
import postStyle from "./post.module.css" import { useParams } from 'react-router-dom'; const Post =() => { const { postId } = useParams(); return ( <div className={postStyle.container}> <h2>記事詳細 {postId}</h2> </div> ) } export default Post
import { createStore } from 'redux' const initialState = { posts: [ { postId: '1', postName: 'サンプル記事1', postDetail: 'サンプル記事1のテキスト', }, { postId: '2', postName: 'サンプル記事2', postDetail: 'サンプル記事2のテキスト', }, { postId: '3', postName: 'サンプル記事3', postDetail: 'サンプル記事3のテキスト', }, ], }; const reducer = (state = initialState) => { return state; }; const store = createStore(reducer); console.log(store.getState()); export default store;

React勉強中です。
至らない点も多々あるかと思いますが、ご教授いただけると幸いです。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Reduxは詳しくないですが、react-router-domから以下の方法でルーティング先でパラメータを取得できます。

パスパラメータはpostIdで送り出される。

js

1<Route path=":postId" element={ <Post /> }></Route>

例)パスパラメータが1の場合、ブラウザのURI表示が以下のようになる

https://任意のip/1

コンポーネントからパラメータを受け取る

js:Post.js

1import { useParams } from "react-router-dom" 2const { postId } = useParams()  3console.log(postId) //パラメータ通り1になるはず

この要領でいけるはずです。

投稿2023/07/25 08:07

編集2023/07/25 08:19
FKM

総合スコア3617

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

anpanchi

2023/07/26 00:05

ご回答ありがとうございます! ご教授いただいた方法で「https://任意のip/Post1」と表示はできているのですが、「Post1」の中身を表示する方法はお分かりになりますでしょうか><?
FKM

2023/07/26 01:02 編集

二通りの方法で紐づけできます。今回はループ文の中で、リアルタイムの変数制御しないのなら、②の方が合理的かも知れません。 ①useContextフックを用いてpostsオブジェクトを受け渡してidに合致するものを展開する ②ループの中でPostの中に変数postをまるっとPostコンポーネントに受け渡す <Post post={post} /> それをpropsで受け取ればいいのではないかと思います。あとは紐づけたidは取得した記事に合致しているかどうかの検証用に用いるといいでしょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問