Используя хук useParams в реакции

Question

Я учусь использовать Params Hook в реакции. У меня есть такой URL-адрес, и мне нужно извлечь из него букву 9.

    http://localhost:3010/9/solution

Как я могу go об этом?

Answer 1

Я предполагаю, что вы используете реагирующий маршрутизатор, если вы определяете маршрут, например, такой:

<Route path="/:id/about">
 <About />
</Route>

Обратите внимание, что вы определяете путь с помощью этой записи: id, это означает, что id будет параметром в этом конкретном случае c. Затем вы создаете компонент Link

<Link to="/2/about">About</Link>

. И в вашем компоненте, который в этом примере является компонентом about, вы можете использовать хук следующим образом:

function About() {
 const { id } = useParams();
 return (
  <div>
   <h2>Now showing post {id}</h2>
  </div>
 );
}

У меня есть эта песочница для кода, если Вы хотите проверить результат https://codesandbox.io/s/react-router-basic-nv8pn

Answer 2

Взгляните на это:

крючок useRouter для лучшей маршрутизации с реагирующим маршрутизатором

Он объединяет все крючки useParams, useLocation, useHistory, useRouteMatch в один * Хук 1008 *, который предоставляет только те данные и методы, которые нам нужны.

Надеюсь, вам понравится!

Answer 3

Если вы используете react-router, то вы должны использовать Browser Router в вашем приложении React: https://reacttraining.com/react-router/web/api/BrowserRouter

, а затем объявить маршрут как:

<Route path="/{id}/solution" component={Component} />

и тогда в вашем Компоненте вы сможете использовать его:

const { id } = useParams();