reactjs - 无法访问 react 路由器的历史记录

Question

尝试调用 this.props.history.push("/home") 时历史记录未定义.

代码:

Index.js

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <HashRouter>
    <App location />
  </HashRouter>
);

App.js

export class App extends React.Component {
  handleClick = () => {
    this.props.history.push("/home");
  };
  render() {
    return (
      <div className="App">
        <button onClick={() => this.handleClick()}>Click to Nav</button>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

react 路由器:v5.2.0

CodeSandbox 链接:https://codesandbox.io/s/sharp-wing-ju5ou9?file=/src/App.js

Answer 1

App组件需要由 Route 渲染组件，因此可以传递 route props所以有一个定义的 history prop，或装饰和导出 App与 withRouter高阶组件。

应用程序

import React from "react";
import "./styles.css";
import { withRouter } from "react-router-dom";

class App extends React.Component {
  handleClick = () => {
    this.props.history.push("/home");
  };
  render() {
    return (
      <div className="App">
        <button onClick={() => this.handleClick()}>Click to Nav</button>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

export default withRouter(App);

或者您可以转换 App到 React 函数组件并导入并使用 useHistory改为钩子(Hook)。

import React from "react";
import "./styles.css";
import { useHistory } from "react-router-dom";

const App = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push("/home");
  };

    return (
      <div className="App">
        <button onClick={handleClick}>Click to Nav</button>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
}

export default App;

我还看到您正在使用 react@18和<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f38196929087de819c86879681de979c9eb3c6ddc1ddc3" rel="noreferrer noopener nofollow">[email protected]</a> 和已删除 React.StrictMode您的 index.js 中的组件文件。 react@18 引入了一个问题破坏了 RRDv5 路由(描述为 here )，已在 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f1e6e2e0f7aef1ecf6f7e6f1aee7eceec3b6adb0adb0" rel="noreferrer noopener nofollow">[email protected]</a> 中解决所以我建议您升级到最新的v5版本。

npm i -s react-router-dom @5

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { HashRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </StrictMode>
);