React: 使用Get路由参数

在React中，我们可以使用react-router-dom库来实现路由。在路由中，我们可以使用Get参数来传递参数。

获取路由参数

我们可以使用useParams钩子来获取路由参数。下面是一个示例代码：

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

function User() {
  const { id } = useParams();

  return <h1>User ID: {id}</h1>;
}

export default User;

在上面的代码中，我们从useParams钩子中获取了路由参数id。现在我们可以在页面上使用这个参数。

定义路由

在我们定义路由时，我们可以使用:id来定义参数。下面是一个示例代码：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import User from "./User";

function App() {
  return (
    <Router>
      <Route path="/user/:id" component={User} />
    </Router>
  );
}

export default App;

在上面的代码中，我们使用/:id来定义路由参数。现在，我们可以使用User组件来获取参数。

结论

在React中，我们可以使用useParams钩子来获取路由参数。我们可以在路由中使用/:id来定义路由参数。

下面是一个完整的示例代码：

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function User() {
  const { id } = useParams();

  return <h1>User ID: {id}</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/user/1">User 1</Link>
          </li>
          <li>
            <Link to="/user/2">User 2</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
}

export default App;

在上述代码中我们定义了三个路由，分别是Home, About和User，User路由包含了动态路由参数:id，我们使用了useParams函数来获取到动态参数，这样实现了我们的topic。