使 history.push 在 React app.tsx 中可用

Question

将 React 16 与 Typescript 结合使用。在 app.tsx 中的单击处理程序方法中，我需要重定向，以便从应用程序中的任何屏幕进行重定向。但不能在 app.tsx 中使用 this.props.history.push。我们在 app.tsx 中使用了 BrowserRouter。我也需要来自 Modal 组件的类似重定向，但似乎整个应用程序（包括 app.tsx）都没有历史记录。有没有办法做到这一点？我尝试了很多不同的东西，没有任何效果。我需要将 history.push 提供给整个应用程序，每个组件，包括 app.tsx...这可能吗？

这是我的 app.tsx（复制自原始的非通用部分，替换为 ...）

import * as React from 'react'
import { BrowserRouter as Router } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import {RouteComponentProps} from "react-router";
....

export interface DispatchProps {
....
}

export interface AppProps {
loading?: boolean;
...
}

interface State {
...
}


type Props = DispatchProps & AppProps & RouteComponentProps<{}>;

export class App extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = {
            ...
        }
    }

    render() {
        ...
        return (
            <div>
                <Router>
                    <div>
                        <div id="header"></div>
                        .....
                    </div>
                </Router>
                <Footer />
            </div>
        )

    }
}

export default withRouter(App);

这是我的 routes.tsx（复制自原始的非通用部分，替换为 ...）

    import * as React from 'react';
    import { NavLink } from 'react-router-dom';
    import { Route, Redirect, Switch, RouteComponentProps, RouteProps } from 'react-router';

    import withBreadcrumbs, {
      BreadcrumbsRoute,
      InjectedProps,

    } from 'react-router-breadcrumbs-hoc';

    ...

    const routes: BreadcrumbsRoute[] = [
      { path: '/not-found', breadcrumb: '404' },
      { path: '/path1', breadcrumb: 'component1' },
      { path: '/path2', breadcrumb: 'component2' },
        ...  
    ];

    const Breadcrumbs = ({ breadcrumbs }: InjectedProps) => (
    ...
    )

    export const Routes = () => (
      <div>
        <Switch>
            <Route exact={true} path="/not-found" component={NotFound} />
            <Route exact={true} path="/" component={Home} />
            <Route
              exact={true}
              path="/some-path"
              component={SomeComponent}
           />
          <PrivateRoute
            exact={true}
            path="/some-other-path/:some-parameter"
            component={SomeOtherComponent}
          />
          ...
          <Redirect to="/not-found" />
        </Switch>
      </div>
  ); 

    export const x = withBreadcrumbs(routes, { disableDefaults: true })(Breadcrumbs);

    const PrivateRoute = ({ component, ...rest }: RouteProps) => {
        ...
        const render = (props: RouteComponentProps<{}>): React.ReactNode => {
            ...
        }   
    } 

    export default Routes;
    export { x as breadcrumb };

Answer 1

我通过安装一个 npm 包解决了这个问题。 SOF 中有一篇关于同一问题的帖子，作者给出了他/她创建的 npm 包的链接。可惜找不到原帖。它仅适用于 ReactJS，我刚刚使它在 React+TS 中可用。 npm 包是react-router-global-history。以下是我的代码 sn-ps：

这是一个新创建的文件，因为@types 不适用于上述包

src/react-router-global-history.d.ts

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

// import { any } from 'expect';
import { History } from 'history'

declare module 'react-router-global-history' {
    export const ReactRouterGlobalHistory: React.ComponentType<any>;
    export default function getHistory(): History;
}

这是我的 app.tsx（复制自原始的非通用部分，替换为省略号）

src/app.tsx

import * as React from 'react'
import { BrowserRouter as Router } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import {RouteComponentProps} from "react-router";
...
import { ReactRouterGlobalHistory } from 'react-router-global-history';
import getHistory from 'react-router-global-history';
...

export interface DispatchProps {
....
}

export interface AppProps {
loading?: boolean;
...
}

interface State {
...
}


type Props = DispatchProps & AppProps & RouteComponentProps<{}>;

export class App extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = {
            ...
        }
    }

    render() {
        ...
        return (
            <div>
                <Router>
                    <div>
                        <ReactRouterGlobalHistory />
                        <div id="header"></div>
                        .....
                    </div>
                </Router>
                <Footer />
            </div>
        )

    }
    ...
    onClickHandler(someParam: string, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        event.preventDefault();
        ....
        getHistory().push('/some-path');
    }
}

export default App;

PS：我的应用是使用 create-react-app 创建的

Answer 2

您好，我认为您通常不需要应用程序中的路由器组件 withRouter HOC 它具有

Answer 3

如果您想要 this.props.history.push，那么您必须使用 withRouter HOC 导出您的组件。