reactjs - 如何在 React JS 中使用路由从查询字符串中获取数据

Question

我想知道如何使用 reactJs 中的路由从查询字符串中获取数据。任何人都可以帮我得到答案吗？

export default function ParamsExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
            </div>
        </Router>
    );
}

function Child() {
    let {query} = window.location.href;

    return (
        <div>
            <h3>query: {query}</h3>
        </div>
    );
}

Answer 1

请检查以下示例。希望对你有帮助。

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

export default function ParamsExample() {
    return (
        <Router>
            <div>
                <h2>Accounts</h2>

                <ul>
                    <li>
                        <Link to="/netflix">Netflix</Link>
                    </li>
                    <li>
                        <Link to="/zillow-group">Zillow Group</Link>
                    </li>
                    <li>
                        <Link to="/yahoo">Yahoo</Link>
                    </li>
                    <li>
                        <Link to="/modus-create">Modus Create</Link>
                    </li>
                </ul>

                <Switch>
                    <Route path="/:id" children={<Child/>}/>
                </Switch>
            </div>
        </Router>
    );
}

function Child() {
    let {id} = useParams();

    return (
        <div>
            <h3>ID: {id}</h3>
        </div>
    );
}

Source