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

Question

実現したいこと

• 動的ルーティングを使用して、記事詳細ページに、記事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勉強中です。
至らない点も多々あるかと思いますが、ご教授いただけると幸いです。
宜しくお願い致します。

Answer 1

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

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

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

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

https://任意のip/1

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

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

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

Comments

[anpanchi]

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

[FKM]

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