具有 JSON 數據的 React Router ID 動態路由

Question

我完全是反應的初學者。 我日復一日地努力提高自己的技能。 今天我遇到了問題，我想創建具有 JSON 個字符的動態路線（這里是龍珠 z）我的路線是正確的，但我想只在點擊的角色上顯示傳記，比如“我點擊 goku show goku bio”我想做到沒有 REACT HOOKS（不要使用位置、使用參數等等）。 此刻我完全被困住了

你能幫助我嗎？ 我能怎么做？

感謝幫助：）

這是我項目的 blitzstack：

REACT ROUTER DBZ 練習 - 沒有鈎子

Answer 1

我不知道你為什么要使用react-router-dom而不是真正將它用於它的設計目的。 您正在使用 function 個組件，據我所知，任何解決方案都需要 React 掛鈎。 無論您只是使用useParams鈎子來獲取要過濾的id ，還是在父級中使用useState聲明一個id state，或者創建一個 React 上下文並同時使用useState和useContext ，或者使用 Redux 以及useDispatch和useSelector 。 你看到這是走向何方了嗎？

我建議只使用useParams掛鈎，因為它最容易實現。

1. 修復角色生物路線，使id路線匹配參數更易於閱讀和使用。

    <Route path="/CharBio/:id" element={<CharBio />} />

   使用path="/CharBio:id"鏈接將注入一個前導:字符到帶有to={`/CharBio${element.id}`}的 id 中，即id參數不是"goku"而是":goku" ，這對於過濾來說並不容易。

2. 修復Perso中的鏈接，使其鏈接到"/CharBio/:id"路徑。

    <Link to={`/CharBio/${element.id}`}> <h1>{element.id}</h1> </Link>

3. 在CharBio組件中使用useParams掛鈎並按id過濾API數據。

    export default function CharBio() { const { id } = useParams(); const element = API.find(el => el.id === id); return element? <p>{element.bio}</p>: null; }