Как в Redux указать изменения состояния пути React Router

Question

Мне нужно обновлять состояние компонента при переходе на другую страницу.

Отчасти я нашёл как это сделать, но это не работает для react-router-dom v6

ERROR in ./src/index.js 
export 'browserHistory' (imported as 'browserHistory') was not found in 'react-router-dom'

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css'
import { Provider } from 'react-redux'
import { applyMiddleware, createStore } from 'redux'
import allReducers from "./reducers";
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, browserHistory } from 'react-router-dom';
import { routerMiddleware } from 'react-router-redux';

const historyMiddleware = routerMiddleware(browserHistory)
const store = createStore(allReducers, applyMiddleware(historyMiddleware))


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>
)

reportWebVitals();

reducers/index.js:

import { combineReducers } from "redux";
import CardReducers from './cards'
import ActiveCard from './active-card'
import ActiveSlide from "./active-slide";
import { routerReducer } from "react-router-redux";

const allReducers = combineReducers(
  {
    routing: routerReducer,
    cards: CardReducers,
    active: ActiveCard,
    activeSlide: ActiveSlide,
  }
)

export default allReducers

Также я нашёл, что в 6 версии react-router вместо browserHistory используется useNavigate, но я не знаю, как применить это в моём коде.

   "react-redux": "^8.1.3",
    "react-router-dom": "^6.18.0",

Answer 1

В файле компонента App импорт

import { useLocation } from "react-router-dom";

В самом компоненте App добавьте код

const location = useLocation();

useEffect(() => {
    console.log(location.pathname); // Тут страница, на которую перешли
    // Добавьте ваш код, который сетит данные в хранилище Redux
    // dispath(...)
}, [location.pathname]);

Хук useLocation() возвращает объект, в котором находится информация о текущей странице пользователя

{ pathname: "/", search: "", hash: "", state: null, key: "default" }

Подробнее о хуке useLocation()

БЛОГ НА HUSL

Как в Redux указать изменения состояния пути React Router

Ответы (1 шт):