react route - 如何使用 history.push 切换组件？只有 URL 变化

Question

我有一个功能，我希望它能替换 Header 和 Footer 组件之间的组件。
Where/How 我应该将 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>
  );
}

编辑

我刚刚从Index.js中删除了BrowserRouter，同样的问题。
Index.js

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

pageIndex 上方的这种方式正在更新，但 history.push 不要切换组件。

Answer 1

更新

请看看这个，我试图复制你的问题。

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

您使用过 Router 两次，一次在 App.js 内作为 <Router>，另一次在 index.js 内作为 <BrowserRouter>。你需要做的是；仅在 App.js 内部使用并确保将其导入为：

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

因为 Router 接受 history prop，而不是 BrowserRouter，并且还从 index.js.

中删除 BrowserRouter

为了安全起见，使用 useHistory() 钩子获取历史值。

这将解决您的问题。

Answer 2

我认为这里发生的事情是每次更新 pageIndex 时都会创建 history 对象。理想情况下，它应该只手动创建一次。

您可以在此处找到有效的解决方案 Sandbox。

我更新了

创建历史对象的逻辑
已从应用

Router

使用useHistory获取组件中的历史对象。
还写了pageIndex更新时推送变化的效果

react route - 如何使用 history.push 切换组件？只有 URL 变化

react route - How to use history.push to switch components ? Only URL changes

history

routes

reactjs

react-router

react-router-dom

编辑