Блог

У меня есть функция, которую я хочу, чтобы она заменяла компоненты между Header компонентами и Footer компонентами.
Где/как я должен использовать defaultRouter функцию с history.push . Я вижу, что изменен только URL-адрес.
Header Компонент обновляет pageIndex .
Я попытался переключиться defaultRouter на useCallback функцию, но это совсем не сработало.

Каков порядок выполнения функций диссертаций? App.js

 function App() {
  const [searchResults, setSearchResults] = useState([]);
  const [itemsAmount, setItemsAmount] = useState('');
  const [pageIndex, setPageIndex] = useState();

  const history = createBrowserHistory();

  // let history = useHistory();

  const defaultRouter = useMemo(() => {
    console.log(pageIndex);
    switch (pageIndex) {
      case 1:
        history.push({ pathname: '/search', state: searchResults });
        break;
      case 2:
        history.push('/cart');
        break;
      default:
        history.push('/');
        break;
    }
  }, [pageIndex]);

  return (
    <div className='App'>
      <Header
        settingResults={setSearchResults}
        itemsCartAmount={itemsAmount}
        setPageIndex={setPageIndex}
      />
       {defaultRouter}
       <Footer />
      <Router history={history}>
        <Switch>
          <Route exact path='/'>
            <Home />
          </Route>
          <Route path='/search'>
            <Search/>
          </Route>
          <Route path='/cart'>
            <Cart />
          </Route>
          <Route component={PageNotFound} />;
        </Switch>
      </Router>
     
    </div>
  );
}
 

Редактировать

Я только что удалился BrowserRouter из Index.js, та же проблема.
Index.js

 ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
 

Этот способ выше pageIndex -обновление, но history.push не переключайте компоненты.

Я думаю, что здесь происходит то, что history объект создается каждый раз, когда pageIndex он обновляется. В идеале он должен быть создан только один раз вручную.

Вы можете найти рабочее решение здесь.

Я обновил

https://codesandbox.io/s/amazing-swartz-jxc5p?file=/src/App.js

Вы использовали маршрутизатор дважды, один внутри App.js as <Router> , а другой внутри index.js as <BrowserRouter> . Что вам нужно сделать, так это использовать только внутри App.js и убедитесь, что он импортирован как:

import {Router} from 'react-router-dom';

поскольку маршрутизатор принимает поддержку истории, а не браузер, а также удаляет BrowserRouter из index.js .

Для более безопасной стороны используйте useHistory() крючок для значения истории.

Это устранит вашу проблему.