从 React 和 React Router 中的 URL 获取 ID

Get the ID from a URL in React and React Router

使用useParams()钩子从 React 中的 URL 获取 ID，例如
const params = useParams(). 该挂钩从当前 URL 返回与路径useParams匹配的动态参数的键值对对象。Route

应用程序.js


import React from 'react';
import {Route, Link, Routes, useParams} from 'react-router-dom';

function Users() {
  // 👇️ get ID from url
  const params = useParams();

  console.log(params); // 👉️ {userId: '4200'}

  return <h2>userId is 👉️ {params.userId}</h2>;
}

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ link to dynamic path */}
              <Link to="/users/4200">Users</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          {/* 👇️ handle dynamic path */}
          <Route path="/users/:userId" element={<Users />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

useParams钩子从当前 URL 返回一个由<Route path>.

请注意，我们在呈现组件path的组件上设置了一个动态属性– 。RouteUsers<Route path="/users/:userId" element={<Users />} />

我们可以使用useParams挂钩在访问者导航到时获取 ID
/users/some-id，

应用程序.js


function Users() {
  // 👇️ get ID from url
  const params = useParams();

  console.log(params); // 👉️ {userId: '4200'}

  return <h2>userId is 👉️ {params.userId}</h2>;
}

该路线将匹配之后的任何内容/users/，例如/users/123或
/users/asdf。

在使用钩子之前，请确保将 React 应用程序包装Router在文件中的组件中
。index.jsuseParams

索引.js


import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router

root.render(
  <Router>
    <App />
  </Router>
);

用Router组件包装你的 React 应用程序的最佳位置是在你的index.js文件中，因为那是你的 React 应用程序的入口点。

一旦你的整个应用程序都被一个组件包裹起来Router，你就可以在你的组件中的任何地方使用 react router 包中的任何钩子。

–