我目前被卡住了，没有得到错误，我不知道下一步该尝试什么。
我有一个App.js，其中包含标准的页面切换，它的工作：

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/googlesearch">
          <i className="material-icons">search</i>
        </Link>
        <Link to="/createUser">
          <i className="material-icons">add</i>
        </Link>
        <Link to="/">
          <i className="material-icons">home</i>
        </Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/create" element={<Create />} />
        <Route path="/createUser" element={<CreateUser />} />
        <Route path="/googlesearch" element={<GoogleSearch />} />
        <Route path="/:id" element={<Update />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

当我点击我的谷歌搜索，我正确地移动到我的谷歌搜索页面：

function GoogleSearch() {
  return (
    <div className="main-wrapper">
      <MyGoogleMap />
    </div>
  );
}
export default GoogleSearch

它呈现了我的google maps组件，在这里，我已经完成了集成，当我使用Google DistanceMatrixService进行位置搜索时，我触发了回调，并通过成功的console. logs进行了确认。
当前，它看起来如下所示：

import { Navigate } from "react-router-dom";
...
...
Render() {
   return(
       <Wrapper>
           ...
           <div>
               <DistanceMatrixService
                   options={{  
                   origins: [autocompletedplace['formatted_address']],
                   destinations: destinations, 
                   travelMode: "DRIVING",
                   }}
                   callback = {(response) => { return(<Navigate to="/" />)}}
               />
           </div>
        </Wrapper>
    );
}

我已经尝试Navigate到“/pages/Home”，只是为了尝试完整的路径。我试图导航离开的当前路径是："/pages/GoogleSearch"
我目前在控制台中没有收到任何错误，但我的页面没有更改。那么，我如何将页面更改为另一个页面，并将目的地和我的响应传递到这个新页面？