Как передать forwardRef через маршрут при использовании response-router-dom

Question

Допустим, у меня есть 2 компонента: приложение и проект

Я хочу контролировать элементы в моем компоненте проекта из моего компонента приложения.

Когда я не использую маршрут, я могу просто сделать следующее в моем компоненте приложения

const App = () => {

  const ProjectRef = useRef(null);
  
  return (
  
   <Project ref={projectRef}>

  );
}

Затем в моем компоненте проекта я могу получить ссылку как таковую

const Project = ({}, ref) => {}

Моя проблема заключается в том, как достичь этого при использовании маршрута. Я пробовал в своем приложении следующее. js компонент:

  <Switch>
    <Route path="/projects/:slug">
      <Project ref={projectRef}/>
    </Route>
  </Switch>

Это работает в том смысле, что я могу получить ссылку, однако в этом методе я не могу получить доступ к информации о маршрут, который мне нужен для этого динамического c маршрута.

Раньше я делал следующее, чтобы получить пул

const Project = ({ match, location }) => {
  // Get slug
  const {params: { slug }} = match;
}

Я пробовал следующее, но это не работает, совпадение пусто.

const Project = ({ match, location }, ref) => {}

Я ищу идеальный способ достичь этого с помощью функциональных компонентов.

Answer 1

Вы не передаете маршрутизатор props определенному компоненту маршрутизатора Project. Таким образом, простая передача props компоненту должна работать в вашем случае.

Просто замените это

  <Switch>
    <Route path="/projects/:slug">
      <Project ref={projectRef}/>
    </Route>
  </Switch>

на это

  <Switch>
    <Route
       path="/projects/:slug"
       render={(props) => <Project {...props} ref={projectRef} />}
    />
  </Switch>