Day25 React Router useParams

我们可以在一般的静态URL网址上加上动态路由参数，在 URL 中设置动态参数允许路由在将 URL 的动态参数传递给该组件时呈现相同的参数内容，以便它可以根据参数更改其数据。

< Route  path ="/ user /:id" component = = {User} />

:id是动态设置的路由参数。

我在user组件页面加入动态参数，所以在App.js的User路由path上要加上:id路由参数(可自由命名)

<Route  path="/user/:name/:Jeff" component = {User} />

然後在User.js中导入

import { useParams } from 'react-router-dom';

*确保:id参数和User组件中的{ 参数 }要一样。

User.jsx

import React from 'react';
import { useParams } from 'react-router-dom';



const User = () => {

    const {name , Jeff} = useParams();
    return (
        <div>
            <h1>This is {name} {Jeff} Page</h1>
        </div>
    )
};


export default User;

在 URL 中设置动态参数後，依照参数的内容可输入相对应的文字或数值。