當您使用 React Router 以動態參數的方式時,一個非常常見的需求是獲取我們在頁面中顯示的數據。
舉個例子,假設我們有一個項目列表,點擊項目後會進入項目詳情頁,URL 地址為 /project/PROJECT_ID
。
我找到了兩種方法來實現這個需求。
首先,在路由中聲明這樣的路徑:
<Route path="/project/:id">
<SingleProject />
</Route>
注意這裡的 /project/:id
路徑。這表示該組件將接收到 id
參數中的動態部分。
接下來,在 SingleProject 組件中,我們可以使用 useParams
鉤子來獲取 id
參數:
import { useHistory, useParams } from 'react-router-dom';
//...
const { id } = useParams();
在我的案例中,我使用這個 id
參數從一個項目數組中過濾出數據,但您也可以使用它來查詢數據庫或者進行其他任務。
另一種方式是使用 props:
<Route path="/project/:id" render={(props) => <SingleProject {...props} />} />
在 SingleProject 組件中(即在上面的 render 屬性中列舉的那個組件),我們使用傳入的 props
:
function SingleProject(props) {
//...
}
這些 props 包含在 match.params
屬性下的參數,所以我們可以使用對象解構來重新獲取我們的 id
:
const { id } = props.match.params;
match
也可以在內聯渲染的路由中使用,這在我們在渲染組件之前使用 id
參數查找帖子數據源時很有用:
const posts = [
{ id: 1, title: 'First', content: 'Hello world!' },
{ id: 2, title: 'Second', content: 'Hello again!' }
]
const Post = ({post}) => (
<div>
<h2>{post.title}</h2>
{post.content}
</div>
)
//...
<Route exact path="/post/:id" render={({match}) => (
<Post post={posts.find(p => p.id === match.params.id)} />
)} />