Как получить значение активного параметра из React Router на боковой панели или в навигационной панели, чтобы создать ссылку?

Question

Возможно, я подхожу к этому неправильно, но я следую вместе с этим примером из документации React Router. В моем случае одна из ссылок с боковой панели должна иметь вложенный параметр (например, /bubblegum/:brand/nutrition), чтобы моя боковая панель выглядела примерно так:

<ul style={{ listStyleType: "none", padding: 0 }}>
  <li>
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/bubblegum">Bubblegum</Link>
  </li>
{brand &&
<>
  <li>Selected Gum: {brand}</li>
  <li>
     <Link to="/bubblegum/{brand}/nutrition">Nutritional Information</Link>
  </li>
  <li>
     <Link to="/bubblegum/{brand}/history">History</Link>
  </li>
</>
}
  <li>
    <Link to="/shoelaces">Shoelaces</Link>
  </li>
</ul>

Если пользователь переходит к /bubblegum/juicyfruit/nutrition, как я могу заменить {brand} в Link с juicyfruit? Если бы эта боковая панель была в component из Route, я знаю, что могла бы посмотреть на this.props.match, но поскольку боковая панель стоит отдельно, она не имеет доступа к match.

Answer 1

Передайте this.props.match компоненту боковой панели из родительского компонента ...

<Sidebar brand={this.props.match.params.brand}
  ...

или используйте withRouter() (https://reacttraining.com/react-router/core/api/withRouter) для динамического добавления пропеллы match к компонентунапрямую:

// import withRouter
import { withRouter } from "react-router";

// in your render function of Sidebar component you now have access to `match`
const { match } = this.props;

// use it in your JSX
<li>
  <Link to={`/bubblegum/${match.params.brand}/history`}>History</Link>
</li>

// using `withRouter` requires wrapping your export
export withRouter(Sidebar)...