javascript - 如何从父组件访问路由信息？

Question

我在从父组件访问参数 ID 时遇到问题。我知道 Prop 是从父组件传递到子组件的，所以例如 Dashboard 组件可以访问 id，但侧边栏组件没有。话虽如此，有没有办法为侧边栏提供该 ID，以便在选择选项卡时可以适本地路由。

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

登录代码评估用户 Angular 色，然后相应地路由用户。例如，当他们是经理时，url 看起来像 https://localhost:1111/main/waod1289yu123unb这会将用户推向主要组件。

主要.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>
  );
};

main.js 组件中有嵌套路由，因为内容只会显示在侧边栏的右侧。所以理论上，每当有人点击侧边栏中的一个链接时，它会调用下面的处理路由方法，它应该将用户推送到“新 url”应该与上面的相同，只需附加“/dashboard”例子。所以https://localhost:1111/main/waod1289yu123unb/dashboard

边栏.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

在您的Sidebar 组件中，您可以使用matchPath 访问Dashboard 的id来自 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`);
    } 
  };