使用 BrowserRouter 以编程方式响应 TypeScript 更改路由

Question

我使用BrowserRouter 来管理路由。我有一个函数，当它被调用时，我想在不刷新页面的情况下更改路由。

import React from 'react';
const myPage: React.FC = (props) => {
  function loadPage(event: any) {
    if (event.target.id) {
      window.history.push('/' + event.target.id)
    }
  return (
    <div id='home' onClick={loadPage}><div/>
    <section> {props.children} </section>
  )
...

我得到的错误是Property 'push' does not exist on type 'History'.ts(2339)

注意：路由器是该元素的子元素，并被传递到 props.children 中

Answer 1

有效的修复是......

window.location.href = '/'+event.target.id;

Answer 2

窗口中的历史对象没有功能推送。我建议你使用 react-router-dom 的 history 或 Redirect。

import React from 'react';
import { withRouter } from 'react-router-dom';
const myPage: React.FC = (props) => {
  function loadPage(event: any) {
    if (event.target.id) {
      props.history.push('/' + event.target.id)
    }
  return (
    <div id='home' onClick={loadPage}><div/>
  )

那么最后，你应该先包装你的组件，然后再将它导出到 withRouter 组件中

export default withRouter(myPage);

这样包装可以通过 props 访问历史记录

Answer 3

如果myPage 组件作为道具传递给<Route> 组件，例如：<Route exact path="/myPage" component={myPage}>，那么您可以使用myPage 组件接收的 React-Router 道具进行导航。

import React from 'react';
import { RouteComponentProps } from 'react-router';

const myPage: React.FC = (props:RouteComponentProps) => {
  function loadPage(event: any) {
    if (event.target.id) {
      props.history.push('/' + event.target.id)
    }
  return (
    <div id='home' onClick={loadPage}><div/>
  )