Антон Спирин

Шаг 1. Изменяем роутер:

<Switch>
  <Route path={"/"} exact render={() => <div>'100'</div>} />
  <Route path={"/male/hat"} exact component={ProductsList} />
  <Route path={"/male/hat/:to"} exact component={ProductDetails} />
</Switch>

Шаг 2. Пишем компонент для детализации:

const ProductDetails = ({ match }) => {
  const { to } = match.params;
  const [state, setState] = useState({ isFetching: true, hat: null });
  const { isFetching, product } = state;  

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => {
          const product = data.find(item => item.to === to);
          setState({ isFetching: false, product });
        });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;

  if (!product) return <div>404: Product not found</div>;

  return (
    <div>
      <h1>{product.title}</h1>
      <h2>{product.price}</h2>
    </div>
  );
}

Шаг 3. Изменяем компонент списка:

const ProductsList = () => {
  const [state, setState] = useState({ isFetching: true, products: [] });
  const { isFetching, products } = state;

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => setState({ isFetching: false, products: data });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;
  
  return (
    <ul>
      {products.map(({ to, title }) => (
          <li key={to}>
            <Link to={`/male/hat/${to}`}>{title}</Link>
          </li>
      ))}
    </ul>
  );
};

В коде нет ошибок. Либо не подключен JQuery, либо в html отсутствует элемент с id="22"

Вам, по-хорошему, надо передавать в карточку action, принимающий идентификатор поста и инициирующий запрос на сервер.
<Img onClick={() => likePost(post.id) />}

const mapDispatchToProps = {
  likePost,
};

how to create your own React course

Надеюсь вы понимаете, что фреймворки в современном фронтенде надо не писать, а использовать и планируете изучить эти материалы только в целях саморазвития.

Можно использовать redux-thunk

Посмотрите ответ c примером логики.

Функциональный компонент:
const Example = () => <Anything />;
Аналогичный классовый:

class Example extends React.Component {
  render() {
    return <Anything />;
  }
}

Так будет лучше:

function fetchProductBySlug(slug) {
  return async dispatch => {
    dispatch({ type: FETCH_PRODUCT_BY_SLUG });
    try {
      const { data } = await axios.get(`/products/${slug}`);
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_SUCCEEDED, payload: data });
    } catch (err) {
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_FAILED, payload: mapAxiosError(err) });
    }
  }; 
}

export default function product(state = initialState, action) { 
  switch(action.type) {
    case FETCH_PRODUCT_BY_SLUG:
      return {
        ...state,
        isFetching: true,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_SUCCEEDED:
      return {
        ...state,
        product: action.payload,
        isFetching: false,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };

    default:
      return state;
  }
}

1. Ставим любой удобный пакет по работе с cookie в браузере, например, js-cookie. Ну или пишем свой.
2. const myCookieValue = Cookie.get(MY_COOKIE_KEY);

@babel/preset-flow

Я понимаю, что я должен на сервере задать 'Access-Control-Allow-Origin':'*', но не хочу ejectить.

Нет, этот заголовок на сервере авторизации vk надо указывать. Но его там нарочно нет.

В документации ведь русским языком написано:

Для получения access_token необходимо выполнить запрос с Вашего сервера на https: //oauth.vk.com/access_token, передав следующие параметры:

Родитель выполняется 1 раз.

Родителем для ваших компонентов является не BkOpenFolder, а Modal.Body, над ним еще есть Modal. Инициирует обновление дочернего древа один из них.

Если использовать PureComponent то 2 раза. Но всё равно раз лишний.

Нет там лишнего раза, для четырех компонентов:
4 вызова конструктора
4 вызова componentWillMount
4 вызова render
4 вызова componentDidMount

Для того чтобы убрать лишние перерисовки компонентов можно:
1. Использоавать PureComponent.
2. Реализовать метод жизненного цикла shouldComponentUpdate.

Компоненты обернутые в вызов connect из пакета react-redux, так же не обновляются при перерисовке древа, если входящие свойства не изменились.

Внимательно читаем, что возвращает метод Array.prototype.splice.

removeItem(index) {
  const newItems = [...this.state.items];
  newItems.splice(index, 1);
  this.setState({ items: newItems });
}

Правильней будет удалять элемент не по индексу, а по id:

removeItem(id) {
  this.setState({ 
    items: this.state.items.filter(item => item.id !== id), 
  });
}

Для этого передавайте id в хандлер:

<button onClick={() => this.removeItem(item.id)} class="nhc-btn">

Еще вы не передаете свойство key:
<div key={item.id} class="note-container">
Lists and keys

И такое форматирование кода никуда не годится. Почитайте гайдлайны от Airbnb:
Airbnb JavaScript Style Guide
Airbnb React/JSX Style Guide

function toSwitch(a) { /* ... */ }

По техническим причинам на стороне бэкенда нету возможности добавить во второй массив значение type.

По-моему, вас обманули.

array2.forEach(el2 => {
 el2.type = array1.find(el1 => el1.idSite === el2.idSite);
});

Но если данных очень много, то быстрей отработает такой вариант:

const array1Clone = array1.slice(0);

array2.forEach(el2 => {
 const index = array1Clone.findIndex(el1 => el1.idSite === el2.idSite);
 
 if (index > -1) {
    el2.type = array1Clone.splice(index,1)[0].type;
 }
});

const index = state.get('users').findIndex(user => user.get('id') === payload.user.id);
return state.setIn(['users', index], fromJS(payload.user));