react-router之useParams()

聲明式路由配置路由參數

import React from 'react';
import { 
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useParams
} from 'react-router-dom';

function Child() {
    let { id } = useParams();
    console.log('id', id)
    return (
        <div>ID: {id}</div>
    )
}

export default function redux() {
    return (
        <Router>
            <div>
                <h2>Accounts</h2>
                <ul>
                    <li>
                        <Link to="/aaa">aaa</Link>
                    </li>
                    <li>
                        <Link to="/bbb">bbb</Link>
                    </li>
                    <li>
                        <Link to="/ccc">ccc</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/:id" children={<Child />} />
                </Switch>
            </div>
        </Router>
    )
}