Как получить доступ к информации о маршруте из родительского компонента?

Question

У меня проблема с доступом к идентификатору параметра из родительского компонента. Я понимаю, что реквизиты передаются от родительского компонента к дочернему компоненту, поэтому, например, компонент Dashboard имеет доступ к идентификатору, а компонент боковой панели - нет. С учетом вышесказанного, есть ли способ предоставить боковую панель с этим идентификатором, чтобы он мог правильно маршрутизировать при выборе вкладки.

Вход. js

      case 'server':
        props.history.push('/profile');
        break;
      case 'manager':
        if (user.linkedRestaurants.length > 1) {
          props.history.push('/main');
        } else if (user.linkedRestaurants.length === 1) {
          props.history.push(`/main/${user.linkedRestaurants[0]}`);
        } else {
          console.log('Nothing for now');
        }
        break;
      default:
        console.log('You do not have a role');
    }

Код входа оценивает роль пользователя, а затем соответствующим образом маршрутизирует пользователя. Например, когда они являются менеджером, URL-адрес будет выглядеть примерно так: https://localhost: 1111 / main / waod1289yu123unb , и это приведет sh пользователя к основному компоненту.

Main. js

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sidebar /> <---- I want to be able to access the id param here 
      <Layout className='site-layout'>
        <Header className='site-layout-background' style={{ padding: 0 }} />
        <Content style={{ margin: '0 16px' }}>
          <Switch>
            <Route exact path='/main/:id/dashboard' component={Dashboard} /> <-- I am able to access it here
            <Route exact path='/main/:id/staff' component={Staff} />
          </Switch>
        </Content>
      </Layout>
    </Layout>
  );
};

Основной компонент. js содержит вложенные маршруты в нем, поскольку содержимое будет отображаться справа от боковой панели. Таким образом, теоретически всякий раз, когда кто-то нажимает на одну из ссылок в боковой панели, он будет вызывать метод обработки маршрутизации, приведенный ниже, и он должен показывать пользователю "новый URL-адрес", который должен совпадать с приведенным выше, просто добавьте "/ приборная панель "например. Итак https://localhost: 1111 / main / waod1289yu123unb / панель инструментов

Боковая панель. js

  const [collapsed, setCollapsed] = useState(false);

  const onCollapse = (collapsed) => {
    console.log(collapsed);
    setCollapsed(collapsed);
  };

  const handleRouting = (key) => {
    if (key === '1') {
      props.history.push('/main/locations');
    } else if (key === '2') {
      props.history.push(`/main/${????}/dashboard`);
    } else if (key === '3') {
      props.history.push(`/main/${????}/staff`);
    } 
  };

Спасибо за любую помощь !!

Answer 1

что @gdh является правильным, но matchPath возвращает объект, чтобы получить этот идентификатор, его можно разложить следующим образом:

const { params: { id } } = matchPath(props.location, { path: `/main/:id`});

Answer 2

В вашем Sidebar компоненте вы можете получить доступ к идентификатору Dashboard с помощью функции matchPath из Reaction-router-dom.

import { matchPath, useLocation } from "react-router-dom";

...
const location = useLocation();
const id = matchPath(props.location, { path: `/main/:id`});
...
const [collapsed, setCollapsed] = useState(false);

  const onCollapse = (collapsed) => {
    console.log(collapsed);
    setCollapsed(collapsed);
  };

  const handleRouting = (key) => {
    if (key === '1') {
      props.history.push('/main/locations');
    } else if (key === '2') {
      props.history.push(`/main/${id}/dashboard`);
    } else if (key === '3') {
      props.history.push(`/main/${id}/staff`);
    } 
  };