Получить значение маршрутизатора из URL в реакции

Question

У меня есть приложение реагирования и компонент, который должен загружать набор значений URL

        <PersistGate persistor={rootStore.persistor}>
            <Router history={history}>
                <ErrorBoundary>
                  <Preloader history={history} /> <== this need to read the url
                  <PasswordChecker></PasswordChecker>
                  <RouteDispatcher></RouteDispatcher> <== this contain the list of routes
                </ErrorBoundary>
            </Router>
        </PersistGate>

В моем пути RouteDispatcher я настроил маршрут следующим образом:

    <BrowserRouter>
      <Switch>
        <PrivateRoute path="/ws/:ws/pj/:pj/ds/:ds" component={HomeDatastore} />
        <PrivateRoute path="/ws/:ws/pj/:pj" component={HomeProject} />
        <PrivateRoute path="/ws/:ws" component={HomeWorkspace} />
      </Switch>
    </BrowserRouter>

как бы получить значение ws=:ws pj=:pj et c ...

Я думал сделать это с помощью регулярного выражения, но мне интересно, есть ли лучший путь. Preloader находится за пределами routeDispatcher, поэтому я не могу найти хороший способ получить значение.

Answer 1

React маршрутизатор обеспечивает params в компонент. Проверьте props.match.params. Я вижу, что у вас есть пользовательский компонент PrivateRoute, поэтому сначала проверьте реквизиты в PrivateRoute.

Answer 2

Можно попробовать использовать useParams () hook. Это дает вам возможность получить доступ к параметрам URL

Ссылка: https://blog.logrocket.com/react-router-hooks-will-make-your-component-cleaner/

Песочница: https://codesandbox.io/s/react-router-useparams-hooks-q8g37

Это может помочь вам начать работу с ним

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

function ComponentName() {
  let params = useParams();
  return (
    <div>
     {params.ws}
     {params.pj}
    </div>
  );
}