Борис Черепанов

Во есть пример с react-router.
Так например работает сайт https://tools.xakplant.ru/

Я так понял вам нужно фильтровать элементы списка.
Если вы храните данные локально то можно пойти двумя путями:
1. Хранить в store два экемпляра фильтра. Превый полный, второй отфильтрованный.
Тогда вы в компонет передаёте только отфильтрованный список.
Вам нужен будет нужен redux-thunk (немного о нём) (или redux-saga). Создайте action creator.
Например с redux-thunk

// signObj - данные для фильтрации
/*
signObj = {
	model: 'audi',
	year: '2007',
	type: "benzin"
}
*/
const filterAction = (signObj) => {
	return (dispatch, getState)=>{
		let filtredList = [ ...getState().noFilterList]; // Не фильтрованный список
		Object.keys(signObj).map((signName)=>{
			filtredList.filter((item)=>( item[signName] ===  signObj[signName]))
		});
		dispatch({ type: SET_FILTRED_LIST, payload: filtredList});  // устанавливает state.filterdList
	}
}

// Можно собирать signObj предварительно в store

2-й вариант. Получать польный список и список полей со значением в самом компонете и делать последовательно фильтрацию уже там

Действительно, скорее всего это про организацию кода.
Если мы делаем наше react-приложение возможно, что однажды нам придётся изменить хранилище. Вообще дурной тон использовать dispatch в самом компоненте не обернув его в HOC. Ведь это сразу делает невозможным переиспользование. Например у нас есть компонент, который рендерит какой-то список и использует redux. Для того, чтобы мы могли его переиспользовать правильно сделать так:

import React, { Component } import 'react';
import List from './List'; // Список
import { connect } from 'react-redux'
import { mutatinList } from './actions'; // Какой-то action

class ListContainer extends Component{
	render(){
		return(
			<List {...this.props} />
		)
	}
}

const mapStateToProps = (state) => ({
    list: state.list
})

const mapDispatchToProps = {
	mutatinList: mutatinList
}

export default connect(mapStateToProps, mapDispatchToProps)(ListContainer);

Если мы захотим переиспользовать наш спискок то нам не придётся переписывать сам компонент, а можем лишь написать новый HOC

Ещё по этой теме я написал небольшую статью

Вот тут коротко описано. Вот ссылка "Анимированный preloader на ReactJS. "

Черех history.push('/home');
Подробно в статье "Использование истории браузера и функция редирект...

Вот есть ещё примеры react-router и redux

Есть статья "Fetch и CORS. Пример на ReactJS"

Вам кажется не хватает заголовков в ОТВЕТЕ

Access-Control-Allow-Origin: https://foo.invalid // Домен с которого идут запросы
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "заголовки которые можно отправить на удалённый сервер" 
// Разрешённые методы
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS

Ну или так

import React, { Component } from 'react';

class Succes extends Component{
    constructor(props){
        super(props);
        this.state = { error: null,
            isLoaded: false,
            items: Array
        }
    }



    componentDidMount() {
        // Fetch тут
        fetch("http://example.url/page.php")
            .then((response) => response.json())
            .then((response) => {
                    this.setState({items: response});
                    this.setState({isLoaded: true});
            })
            .then((error) => {
                this.setState({false: true});
                this.setState({error});
            })


    }



    render (){
        const data = Array.from(this.state.data.headers);

    }

}

export default Succes;

Ну подробно можете прочитать тут

Вообще можно загружать скрипт в событии.
Например вам нужно загрузить реакт и реакт дом только на страницах, где подключен шорткод. Тогда вы делаете следующие:
1. На init wp регистрируете скрипт реакта и реакт дом и может быть бабель.

function react_enquip_script(){
   // Регистрируете скрипты в WP
}

2. Создаёте событие загрузки реакта, через "вешанье" хука)

add_action('react_enquip_script', 'react_enquip_script');

3. Создаёте шотркод (это для примера)

add_shortcode('component_chat', 'component_chat');
function component_chat(){
   do_action('react_enquip_script');
   // Прочий код, в том числе подключение компонента
}

Напомню, что все скрипты должны быть загружены в папку с плагином