如何在 React、Typescript 中使用历史记录？答案

【问题标题】：How to use history with React, Typescript?如何在 React、Typescript 中使用历史记录？
【发布时间】：2025-11-23 10:20:05
【问题描述】：

我正在实现一个在单击按钮时移动到“我的页面”的功能。但是在TS中实现时，JS中使用的方法报错。我需要帮助弄清楚如何解决它。

//Topbar.tsx
function Topbar() {

  const history = useHistory()

  return (
    <header className="topbar">
        <button className="account_logo">
          <FaUserCircle className="logo" onClick = {() => {history.push('/mypage')}}/>
        </button>
      </div>
}

//App.tsx

import "./styles/app.scss";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'

function App() {

  return (
    <div className = "app">
      <Topbar/>
      <section>
      <BrowserRouter>
        <Switch>
          <Route exact = {true} path = "/" component = {Home}/>
          <Route path = "/mypage" component = {Mypage}/>
          <Route path = "/registerpage" component = {RegisterPage}/>
          {/* Not Found */}
          <Route component = {() => <Redirect to = "/" />} />
        </Switch>
      </BrowserRouter>
      </section>
    </div>
  );
}

当我执行上述操作时，我收到以下错误：

未捕获的类型错误：无法读取未定义的属性“推送” 在点击时

我该如何解决？

【问题讨论】：

标签： reactjs typescript browser-history

【解决方案1】：

您需要将TopBar 放入BrowserRouter 才能使用useHistory 挂钩：

import "./styles/app.scss";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'

function App() {

  return (
    <div className = "app">
      <section>
      <BrowserRouter>
        <Topbar/> // <--- Your TopBar should be here
        <Switch>
          <Route exact = {true} path = "/" component = {Home}/>
          <Route path = "/mypage" component = {Mypage}/>
          <Route path = "/registerpage" component = {RegisterPage}/>
          {/* Not Found */}
          <Route component = {() => <Redirect to = "/" />} />
        </Switch>
      </BrowserRouter>
      </section>
    </div>
  );
}

【讨论】：