почему на роутер автоматически реагирует go обратно на предыдущий маршрут при отправке - PullRequest
Новая
       43

почему на роутер автоматически реагирует go обратно на предыдущий маршрут при отправке

0 голосов
/ 20 апреля 2020

У меня есть старое приложение, которое хочет добавить к нему реагирующий маршрутизатор. В частности, я использую HashRouter. Приложение также использует redux и react-redux, но никаких других промежуточных программ, таких как сага или thunk.

Приложение имеет несколько вкладок, каждая на монтировании вызовет loadData для извлечения из бэкэнда. Когда я нахожусь на вкладке № 1 и пытаюсь перейти на вкладку № 2, вызывается метод loadData для № 2. Но после вызова dispatch страница автоматически возвращается на вкладку # 1. Данные загружаются, и когда они загружены (все отправки были вызваны), я пытаюсь перейти к вкладке № 2, и на этот раз она успешна.

Я не могу понять, почему. Похоже, что каждый раз, когда вызывается dispatch, маршрутизатор будет возвращать местоположение окна к предыдущему. Может ли кто-нибудь дать мне подсказку о том, как ее решить?

упрощенный код:

tab # 1 и tab # 2 имеют схожую структуру 

function tab1(props){
const [initialized, setInitialized] = useState(false);
const dispatch = useDispatch();

useEffect(()=>{
  if(!initialized){
    loadData();
    setInitialized(true);
  }
}, [initialized])

function loadData(){
  // if data already in store, exit function early.
  // otherwise:
  dispatch({type: 'REQUEST_DATA'});
  // fetch backend
  // after receive json, dispatch
  dispatch({type:'RECEIVE_DATA', data: json});
}

return (
 // return
)

}

index. js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { HashRouter, Switch, Route } from "react-router-dom";
import logger from "redux-logger";
import * as reducers from "./reducers";
import createPersistedState from './createPersistedState';
...

let middlewares = [];
if (!window.production) {
  middlewares = [logger]
}

const reducer = combineReducers({ ...reducers });

const persistedState = createPersistedState();

const store = createStore(reducer, persistedState, applyMiddleware(...middlewares));

...

const render = () => {
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
          <div id="root-container">
            <HashRouter>
              <ErrorBoundary >
               <Header />
               <div className="app-wrapper">
                 <Switch>
                   <Route path='/tab1' component={tab1}/>
                   <Route path='/tab2' component={tab2}/>
                 </Switch>
               </div>
               <Footer />
             </ErrorBoundary>
           </HashRouter>
          </div>
      </Provider>
    </React.StrictMode>,
    document.getElementById("app")
  );
};

редукторы / индекс. js

export {default as reducer1} from './reducer1'
export {default as reducer2} from './reducer2'
export {default as reducer3} from './reducer3'
export {default as reducer4} from './reducer4'

1 Ответ

0 голосов
/ 21 апреля 2020

ок, получается не проблема с реакцией-роутером, ни с редуксом, а со старым редуктором, который я забыл обновить. В этом редукторе window.location.ha sh по умолчанию сбрасывается. Это все объясняло - каждая отправка будет запускать этот редуктор. После удаления все работает как положено.

...