Javascript 如何访问不在路由器列表中的组件中的历史记录？

我知道有一些问题，但我不能让它工作。 当我在searchbar组件中使用useHistory（）时，我在历史中没有定义。 当我试图通过道具访问history.push时也是如此，因为Routes.jsx中没有列出搜索栏。如何从路由列表中没有的组件以编程方式导航到其他路由

那是我的app.js

函数应用程序（）{
返回(
);
}

useHistory（）将使用react上下文api查找BrowserRouter（或其他路由器）。因此BrowserRouter需要位于组件树的更高位置，而现在不是。我的建议是从Routes.jsx中删除浏览器路由器，并将其放入App.jsx

// App.jsx
function App () {
  return (
    <BrowserRouter>
      <ItemsProvider>
        <div className="App">
          <Header logo={Logo} />
          <main className="container">
            <Routes />
          </main>
        </div>
      </ItemsProvider>
    </BrowserRouter>
  );
}

// Routes.jsx
export default props => {
  return (
    <Switch>
      <Route exact path="/items/:id" component={Item} />
      <Route path="/items" component={Results} />
    </Switch>
  );
};

//App.jsx
函数应用程序（）{
返回(
);
}
//Routes.jsx
导出默认道具=>{
返回(
);
};

搜索栏组件是否位于标题组件内？如果是这样，把你的浏览器路由器向上移动几层，这样搜索栏就是它的后代。是的！搜索栏位于标题组件中，标题也不在路线列表中