Alexandroppolus

return <Navigate to="/" />

тот стейт, который в редуксе - он общий внутри дерева реакт на одной вкладке. Чтобы пошарить на другие вкладки, можно, например, сохранять в localStorage, а по событию window.addEventListener('storage', ...) отлавливать изменения и подтягивать их в стейт-манагер. Это будет состояние в пределах браузера.
Можно сразу сохранять на сервер - старым добрым аяксом, вебсокетами, и т.д., тут нужны доработки на бэке. Такой путь сложнее, чем localStorage, но с той же корзиной может быть по другому никак - если единиц товара не очень много, то надо оперативно отслеживать его доступность другим пользователям.

Здесь абсолютно не нужен useState для url, потому как url зависит только от navigation.pathname и таким образом это просто вычисляемое значение. Из-за useState твой url "отстаёт на один рендер" от запроса данных - то есть на момент срабатывания useEffect с fetch значение url всегда "films". Потом ставится исправленный url, но fetch заново не вызывается - у него зависимости [].

Далее, надо учесть кейс, когда pathname может поменяться. Тогда надо перевызвать useEffect с fetch. Заодно есть смысл размещать данные в отдельных ячейках - это может предотвратить состояние гонки, плюс это будет легче типизировать.

Итого, упрощенно:

const {data, setData} = useState({});

const { pathname } = useLocation();
const apiPath = pathname === "/films" ? "films" :
       pathname === "/starships" ? "starships" :
       pathname === "/people" ? "people" :
       pathname === "/planets" ? "planets" : "";



useEffect(() => {
    const url = `https://swapi.dev/api/${apiPath}`;

    fetch(url)
      .then((res) => res.json())
      .then((resp) => {
        setData((data) => ({
           ...data,
           [apiPath]: resp.results,
        }));
      });
  }, [apiPath]);

.......
<Route path={"/films"} element={<Films value={data["films"]} />} />
.....

ну а внутри Films (и прочих) проверять что если value == null, то данные пока не загрузились, надо подождать.

можно ещё ошибку загрузки обработать, тут сам справишься.

сериализовать нужные параметры в url, а внутри ArcticleItem выловить через useParams. Это самый здравый и каноничный вариант.

если что-то не сериализуемое, то надо передавать через стейт-манагер или ещё как-то.

<Button onClick={clickOnButton}>

Не совсем понятно, зачем тебе WrapperSVG. Скорее всего, это вообще не будет работать, поскольку ты никуда не передаешь тот проп className, который придет от styled.

это ведь styled-components?

попробуй так

export const SVG = styled.svg`
  transition: all 0.15s ease-in-out;
`;

смотри store.getState()

Методы класса, объявленные таким образом, лежат в прототипе (каждый такой метод будет общий для всех экземпляров). Они созданы и существуют ещё до того, как будут созданы экземпляры класса. Соответсвенно, this внутри них не может сам по себе указывать на экземпляр, только если не задать его явно - при вызове через точку, через квадратные скобки, или с помощью call/apply/bind.

Можно объявить методы как стрелочные функции - это современный подход.

class ClassCounter extends React.Component {
...
  increment = () => {
    console.log(this);
    this.setState({ count: this.state.count + 1 });
  };

что практически то же самое, как если бы ты прямо в конструкторе написал

class ClassCounter extends React.Component {
  constructor(props) {
    super(props);
    this.increment = () => {
      console.log(this);
      this.setState({ count: this.state.count + 1 });
    };
  }

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

App рендерится дважды из-за React.StrictMode.

Но вообще, делать вот так запросы противопоказано. Делай в useEffect

используй Link вместо a, должно отпустить

Очевидно, хранить посты не в локальном state компонента, а "снаружи", например в стейтманагере

{operators && operators.map(element => (
        <OperatorCard nameImage={element.image} title={element.title}></OperatorCard>
      ))}

let [LX, setLX] = useState(100);

const leftSwitch = () => {
    setLX(lx => lx + 100);
}

Потому что useModal (и как следствие, компонент, использующий этот хук) использует значение из контекста, и если это значение меняется, будут ререндериться все компоненты, которые зависят от значения контекста (то есть, даже те компоненты, которые работают с другими модалками, ибо контекст общий для всех).