react-router-dom `history`：无法读取未定义的属性“推送” 编辑

如何解决react-router-dom `history`：无法读取未定义的属性“推送” 编辑

我的父组件 App.js 中有一个 Header 和一个 Footer。
我想通过点击 Header 和 Footer 之间的按钮来切换这两个组件。
每次 pageIndex 更改时，我都想替换为其他组件。

我收到此错误 Cannot read property 'push' of undefined
为什么我会收到此错误并且是清洁和适当的乳清（使用我的 defaultRouter() 和 useMemo）？

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

      const history = useHistory();

       useEffect(() => {
         console.log(pageIndex,'App');
       },[pageIndex]);
    
    const defaultRouter = useMemo(() => {
     // Or -  `const DefaultRouter = useMemo(() =>` instead of `useEffect()`
    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/>
          <Home />
          {defaultRouter};  
          <Footer />  
          <BrowserRouter>
            <Route path='/'>
              <Home />
            </Route>
            <Route path='/search'>
              <Search
                searchResults={searchResults}
                setItemsAmount={setItemsAmount}
              />
            </Route>
            <Route path='/cart'>
              <Cart />
            </Route>
            <Route component={PageNotFound} />
          </BrowserRouter>
          ;
        </div>
      );
    }

编辑

正如 Shyam 在下面的回答中所建议的那样，我将 App.js 更改为 useCallback 但 useCallback 不起作用。

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

谢谢

解决方法

这是因为该组件中未设置 react-router 上下文。 由于它是设置上下文的组件，因此您可以在子组件中使用 useHistory，但不能在子组件中使用。

这是解决这个问题的一个非常基本的策略：

const AppWrapper = () => {
  return (
    <Router> // Set context
      <App /> // Now App has access to context
    </Router>
  )
}

const App = () => {
  let history = useHistory(); // Works!
...

// 在这个组件中渲染路由 那么一定要直接使用“wrapper”组件而不是App。

在这里回答： https://stackoverflow.com/a/58221867/1723410

function App() {
  return (
    <BrowserRouter>
       <AppChildren />
    </BrowserRouter>
  )
}     

function AppChildren() {
      const [pageIndex,setPageIndex] = useState();
      const [searchResults,setSearchResults] = useState([]);

      const history = useHistory();

       useEffect(() => {
         console.log(pageIndex,'App');
       },[pageIndex]);
    
    const defaultRouter = useMemo(() => {
     // Or -  `const DefaultRouter = useMemo(() =>` instead of `useEffect()`
    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/>
          <Home />
          {defaultRouter};  
          <Footer />  
          <>
            <Route path='/'>
              <Home />
            </Route>
            <Route path='/search'>
              <Search
                searchResults={searchResults}
                setItemsAmount={setItemsAmount}
              />
            </Route>
            <Route path='/cart'>
              <Cart />
            </Route>
            <Route component={PageNotFound} />
          </>
        </div>
      );
}