domain.com и domain.com/ — два идентичных адреса. Если после домена ничего нет, то слэш можно опустить. Если есть query-параметр, то слэш необходим. Без него никак.
useReducer нужен для того, чтобы способы изменения стейта инкапсулировать в одном месте — внутри редьюсера. Описанный вами подход проигрывает в «понимабельности» — вы внутри actionCreator’ов размазываете логику хранилища.
Такие вещи делаются в реакте не напрямую через работу с домом, а через работу с внутренним состоянием компонента. Читайте документацию, проходите обучающий курс про крестики-нолики.
Учите сначала js, а потом react. И дебажить учитесь. Попробуйте вывести в консоль то, что приходит в фильтр до мапы, а что приходит после. Почитайте, как обращаться к длине строки, вот это всё.
Вам нужно настроить ваш сервер. Сейчас он пытается обработать запрос и не находит такого роута. Это происходит до загрузки фронта. Настройте так, чтобы на любой запрос сервер отдавал ваш index.html — всё заработает.
