Question

使用带有Typescript的React 16。在app.tsx的点击处理程序方法中，我需要重定向，以便重定向可以在应用程序的任何屏幕上进行。但是不能在app.tsx中使用@app.route("/video_feed/<input_frame>") def data_feed(input_frame)。我们在app.tsx中使用了 BrowserRouter 。我还需要从Modal组件进行类似的重定向，但是似乎历史记录在整个应用程序（包括app.tsx）中并不可用。有没有办法做到这一点？我尝试了许多不同的方法，但没有任何效果。我需要对整个应用，每个组件（包括app.tsx）都提供history.push。这可能吗？

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

this.props.history.push

这是我的route.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);

Answer 1

如果要this.props.history.push，则必须使用withRouter HOC导出组件。

Answer 2

嗨，我认为withwithRouter HOC通常不需要在App中使用Router组件

Answer 3

我通过安装npm软件包解决了这个问题。 SOF上有一篇关于同一问题的文章，作者提供了他/他创建的npm软件包的链接。可悲的是，找不到原始帖子。它仅用于ReactJS，而我刚刚使其可在React + TS中使用。 npm软件包为react-router-global-history。以下是我的代码段：

这是一个新创建的文件，因为上述包中没有@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创建的

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

3 个答案: