nivaech

Linkи Switch/Route в разных BrowserRouter, поэтому Linkне находит подходящие роуты, так как их просто нету.

Как примерно должно быть: https://codesandbox.io/s/qvr1p0ovm9

Зависит от того, насколько различается вид/функционал этих компонентов. Если они абсолютно идентичны (аля картинка, название, описание, категория, цена) - то нет смысла делать компоненты под все категории. Если же они достаточно различаются:
- есть одежда, у которой есть виджет выбора размера и цвета
- есть квартиры (условно) у которых есть виджет карты
- есть продукты питания у которых есть диаграма питательных веществ.

То уже имеет смысл думать о каком-то разделении; Но в любом случае соответвие 1:1 между категориями и компонентами вряд-ли нужно. В крупных онлайн магазинах - тысячи категорий. Иметь для них тысячи компонентов - вряд ли может быть оправдано.

Сначала filter, потом map?

const itemList = products.filter(function(obj) {
    return item.category === 'Category Two';
}).map();

Используйте filter. Или же можно разместить условную конструкцию (с оператором &&)

const itemList = products.map(item => item.category === "Category Two" && <ProductCard
        key = {item.id}
        title = {item.title}
        category = {item.category}
        />)

componentDidMount() {
        document.addEventListener('click', this.close);
    }
    
    componentWillUnmount() {
        document.removeEventListener('click', this.close);
    }
    
    close = (event) => {
        const domNode = ReactDOM.findDOMNode(this);
        if (!domNode || !domNode.contains(event.target)) {
            this.setState({ isOpened: false });
        }
    }

я у себя так делаю закрытие чего-либо по клику в любом месте

this.setState(({small}) => {
    return {
        small: small
    }
});

То есть, было small, и осталось small. Наверное, всё-таки новое значение должно быть !small:

this.setState(({ small }) => ({
  small: !small,
}));

Стараться не использовать прямые обращения к элементам DOM в React разработке и использовать состояние компонента.

const Grid extends React.Component {
  state = { itemsSize: 'sm' };

  handleChangeSize = () => { /* some code */ };  

  render() {
    const { itemSize } = this.state;
    const { items } = this.props;

    return (
      <Wrapper>
        <ControlPanel onChangeSize={this.handleChangeSize} />
        {items.map(item => <Item key={item.id} size={this.state.itemSize} />)}
      </Wrapper>
    );
  }
}