How to access route information from a parent component?

Question

I am having an issue with accessing the param id from the parent component. I understand that props are passed from parent component to child component, so for example the Dashboard component has access to the id, but the sidebar component does not. With that being said is there any way to provide the sidebar with that id so it can route appropriately when a tab is selected.

Signin.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');
    }

The sign in code evaluates the user role and then routes the user accordingly. For example when they are a manager the url would look something like https://localhost:1111/main/waod1289yu123unb and that would push the user to the main component.

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>
  );
};

The main.js component has nested routes in it, because the content will just be showing to the right of the sidebar. So in theory whenever someone clicks on one of the links in the sidebar it will call that handle routing method below and it should push the user to the "new url" should be the same as the one above, just append "/dashboard" for example. So https://localhost:1111/main/waod1289yu123unb/dashboard

Sidebar.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`);
    } 
  };

Thanks for any help!!

Answer 1

In your Sidebar component, you can access the id of Dashboard by using the matchPath function from react-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`);
    } 
  };

Answer 2

what @gdh is correct, but matchPath returns an object, to get to that id, it can be destructured like this:

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