如何使用 history.push 从主页到其他组件？

Posted 2023-02-22

【中文标题】如何使用 history.push 从主页到其他组件？

【英文标题】：How to use history.push from Homepage to other components?

【发布时间】：2021-09-20 01:00:00

【问题描述】：

以下所有组件都有一个稳定的Header 组件。 在Header 的两个按钮中，我希望它们从默认的“主页”组件切换“搜索”或“购物车”组件。

我想使用history.push( pathname: 'somepath', state: searchResults ); 移动到我上面提到的两个组件（以及将来更多的其他组件）。

我搜索了很多如何正确 `history.push' 并在 https://reactrouter.com 和更多网站中搜索，但只看到每个钩子的一部分，没有这样的。

问题：

我怎样才能history.push在父组件从子组件，也就是从Header到App，所以Home/Search/Cart将被替换。

如何在Search 组件中使用history.push 中的state？

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

 return (
    <div>
 <Header settingResults=setSearchResults itemsCartAmount= itemsAmount />
       <Route path='/'>
      <Home />
    </Route>
<Fotter/>
    </div>
  );


export default App;

下面这与同一组件的历史挂钩会出错 - TypeError: Cannot read property 'location' of undefined

 return (
    <div>
 <Header settingResults=setSearchResults itemsCartAmount= itemsAmount />
  <Router>
        <Route path='/'>
          <Home />
        </Route>
        <Route path='/search'>
          <Search
            searchResults=searchResults
            setItemsAmount=setItemsAmount
          />
        </Route>
        <Route path='/cart'>
          <Cart />
        </Route>
        <Route component=PageNotFound />
      </Router>
    <Fotter/>
    </div>
  );

我怎样才能将所有这些组合在一起，以便我的计划能够奏效？

【问题讨论】：

您能否更准确地描述您的用例，不清楚。你想从你的Header 组件导航到/search 或/cart，它是Router 的兄弟（放置在同一级别）？

嗨@sathyareddy，我希望Header 保持永久状态，通过单击它的按钮，它将从Home 组件转移到Search 或Cart 或任何其他组件我会选择。查看我的第一个代码示例 - <Route path='/'> <Home />// This to replace </Route>

【参考方案1】：

您应该只使用“BrowserRouter”而不是“Router”。它会解决目的。

或者，如果你想使用“路由器”，你必须在路由文件中定义历史，

    import  createBrowserHistory  from "history";
    const history = createBrowserHistory();

<Router history=history>
<Switch>
        <Route path='/'>
          <Home />
        </Route>
        <Route path='/search'>
          <Search
            searchResults=searchResults
            setItemsAmount=setItemsAmount
          />
        </Route>
        <Route path='/cart'>
          <Cart />
        </Route>
        <Route component=PageNotFound />
       <Switch>
      </Router>

您还需要在那些文件中使用这两行 sn-p 以及您想要使用 history.location 的地方

import  createBrowserHistory  from "history";
const history = createBrowserHistory();

【讨论】：

您好，感谢 Kumar，在您的代码示例中，`history.push( pathname: '/search', state: searchResults );` 应该在函数内部的返回之外吗？

你可以把它放在任何事件函数中......比如点击处理程序或加载事件......最佳实践应该在返回函数之外。