在 React class 組件中使用 react-router-dom 更改頁面

Question

我目前卡住了，沒有收到任何錯誤，我不知道下一步該嘗試什么。

我有一個包含標准頁面切換的 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 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"

我目前在控制台中沒有收到任何錯誤，但我的頁面沒有改變。 那么，如何將頁面更改為不同的頁面，並將目的地和我的回復傳遞給這個新頁面？

Answer 1

調用Navigate僅在 JSX 內部有效。 在非 JSX 部分，想法是使用useNavigate ，但它只在功能組件內部起作用。 由於您的組件是 class 組件，您可以這樣做：

import React, { Component } from "react";
import { Navigate } from "react-router-dom";
export default class ClassComponentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // others states
      redirectToHome: false,
    };
  }
  render() {
    if (this.state.redirectToHome) {
      return <Navigate to="/" />;
    }
    return (
      <Wrapper>
        {/* ... */}
        <div>
          <DistanceMatrixService
            options={{
              origins: [autocompletedplace["formatted_address"]],
              destinations: destinations,
              travelMode: "DRIVING",
            }}
            callback={(response) => {
              this.setState({ ...this.state, redirectToHome: true });
            }}
          />
        </div>
      </Wrapper>
    );
  }
}