Передача одного и того же состояния нескольким компонентам, которые будут и сделать условно (на основе URL)

Question

Относительно новый для React.

У меня есть условное извлечение списка продуктов:

a) в baseUrl ИЛИ b) baseUrl + param, если param существует.

Оттуда, в TopSellersContainer (где состояние), я могу отобразить компонент ProductList , состоящий из ProductItem компонентов (состоящих из реквизита).

Проблема

Мне нужно иметь возможность нажать на компонент ProductItem , чтобы перейти к ProductPageContainer , который, независимо от того, будет ли продукт отображать один и тот же ProductInfoComponents

Компоненты сопоставленных элементов - это, так сказать, основание моего «дерева данных». Чтобы обойти это, я выполняю React-Router-Переключение между ProductList и ProductPageContainer внутри TopSellersContainer .

Я могу получить контейнер сделать для всех URL-адресов, но данные не поступают. Я пробовал это:

<Router>
    <Fragment>
      <Switch>

        <Route path="/topsellers/">
          <div className="top-sellers-page">
            <h1 className="top-sellers-title">Top Sellers</h1>
              <ProductList products={this.state.products} />
          </div>
        </Route>

        <Route path="/topsellers/:id">
          <div className="one-product">
            <ProductPageContainer products={this.state.products} />
          </div>
        </Route>

      </Switch>
    </Fragment>
  </Router>

, но ProductPageContainer не имеет состояния / реквизита / данных вообще.

Я пытаюсь передать одно и то же состояние, продукты, двум разные места, один компонент и один контейнер. Возможно ли то, что я пытаюсь сделать?

РЕДАКТИРОВАТЬ: Добавлен контейнер, в котором я пытаюсь визуализировать один или другой компонент исключительно на основе URL.

import React, { Component, Fragment } from 'react';
import ProductList from '../components/ProductList';
import { BrowserRouter as Router, Route, Switch, useRouteMatch } 
from "react-router-dom";
import ProductPageContainer from "./ProductPageContainer";


class TopSellersContainer extends Component {
  constructor(props){
    super(props);
      this.state = {
        products: []
      }
    }


componentDidMount(){
const { match: { params } } = this.props;
let brand = `${params.brand}`;
const baseUrl = "https://product-fetch-toolstop.herokuapp.com/top40/";


if (brand === "undefined"){
  return (
  fetch(baseUrl)
  .then(res => res.json())
  .then(data => this.setState({products: data.data}))
  .catch(err => console.error)
)} else {
  return (
    fetch(baseUrl + brand)
    .then(res => res.json())
    .then(data => this.setState({products: data.data}))
    .catch(err => console.error)
    )
   }
  }


  render(){

if(this.state.products.length === 0) {
  return <p>Loading...</p>}


  return(
  <Router>
    <Fragment>
      <Switch>

        <Route path="/topsellers/">
          <div className="top-sellers-page">
            <h1 className="top-sellers-title">Top Sellers</h1>
              <ProductList products={this.state.products} />
          </div>
        </Route>

        <Route path="/product/:id">
          <div className="one-product">
            <ProductPageContainer products={this.state.products} />
          </div>
        </Route>

      </Switch>
    </Fragment>
  </Router>
    )
   }
  }
  export default TopSellersContainer;