列表搞定後就進入到詳細頁拉!

但在這之前要先修改一下路徑在進入內頁，這邊就先擷取部分程式片段。

Link處的to改為有id的連結

{posts.map((post)=>{
    return(
        <li key={post.id}>
            <Link to={`/post/${post.id}`}>
                <div className="imgwrap">
                    <img src={post.image} alt=""/>
                </div>
                <div className="news_title">{post.title}
                </div>
                <div className="news_date">
                    { post.dateRange.map((date)=>{
                        return <div>
                            {new Date(date.seconds* 1000).toLocaleDateString("zh-TW")}
                        </div>
                    })}
                </div>
            </Link>
            <a className="news_tag" href="">{post.continent}</a>
        </li>
    )
})}

接著要去App.js增加一個新的path賦予/post/:postId，點擊後會將id值帶入連結。

<Router>
    <Routes>
        <Route path="/postlist" element={<PostList />} />
        <Route path="/post/:postId" element={<Post />} />
    </Routes>
</Router>

這邊講到連結，想補充一個React的寫法(參考)，也是先前有用到的東西 — useNavigate，因為詳細頁有一個back按鈕，用原先的useHistory會出錯，所以寫在這也提醒一下自己。

過去會這樣寫

import { useHistory } from "react-router-dom";

function App() {
  const { go, goBack, goForward } = useHistory();

  return (
    <>
      <button onClick={() => go(-2)}>
        Go 2 pages back
      </button>
      <button onClick={goBack}>Go back</button>
      <button onClick={goForward}>Go forward</button>
      <button onClick={() => go(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}

現在改成navigate直接操控所有的位置，不管是前一頁、下一頁還是前前頁，navigate直接搞定

import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-2)}>
        Go 2 pages back
      </button>
      <button onClick={() => navigate(-1)}>Go back</button>
      <button onClick={() => navigate(1)}>
        Go forward
      </button>
      <button onClick={() => navigate(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}