How can react access the parameters after the URL?

1 year ago
William Carter
1 minute

You can use the useParams hook provided by react-router-dom to retrieve parameters from the URL in React.

Firstly, make sure you have installed react-router-dom.

npm install react-router-dom

Then, in the component where you need to access the URL parameters, import useParams:

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

Next, call useParams to retrieve URL parameters in the component function.

function MyComponent() {
  const params = useParams();
  const { id } = params;

  // 使用获取到的参数进行其他操作
  // ...

  return (
    // 组件的JSX代码
  );
}

In the example above, we assume that the format of the URL is /example/:id, where id is the parameter we want to retrieve.

Finally, you can access and retrieve the URL parameters using the params object, such as const { id } = params. In this example, we save the parameter in the id variable and can use it for further operations in the component.

It is important to note that useParams can only be used within components that are wrapped by a component, as it relies on the routing mechanism provided by react-router-dom.

bannerAds