在 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>
    );
  }
}