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

将React 16与Typescript一起使用。在app.tsx中的click handler方法中，我需要重定向，以便重定向将从应用程序中的任何屏幕发生。但不能在app.tsx中使用

this.props.history.push。我们在app.tsx中使用了浏览器路由器。我还需要从一个模态组件进行类似的重定向，但似乎整个应用程序（包括app.tsx）中都没有历史记录。有没有办法做到这一点？我试过很多不同的方法，但都不管用。我需要使history.push可用于整个应用程序、每个组件，包括app.tsx…这可能吗

这是我的app.tsx（从原始、非通用部件复制，替换为…）

import*作为来自“React”的React
从“react Router dom”导入{BrowserRouter as Router}；
从“react router dom”导入{withRouter}；
从“react router”导入{RouteComponentProps}；
....
导出接口分派道具{
....
}
导出接口AppProps{
加载？：布尔值；
...
}
界面状态{
...
}
类型Props=DispatchProps&AppProps&RouteComponentProps；
导出类应用程序扩展React.Component{
建造师（道具：道具）{
超级（道具）；
此.state={
...
}
}
render（）{
...
返回(
.....
)
}
}
使用路由器（App）导出默认值；

这是my routes.tsx（从原始、非通用部件复制，替换为…）

import*as React from'React'；
从'react router dom'导入{NavLink}；
从“react router”导入{Route，Redirect，Switch，RouteComponentProps，RouteProps}；
用面包屑进口{
面包屑路线，
注射道具，
}来自“react router breadcrumbs hoc”；
...
const routes:BreadcrumbsRoute[]=[
{路径：'/notfound'，面包屑：'404'}，
{path:'/path1'，breadcrumb:'component1'}，
{path:'/path2'，breadcrumb:'component2'}，
...  
];
常量Breadcrumbs=（{Breadcrumbs}:InjectedProps）=>(
...
)
导出常量路由=（）=>(
...
); 
export const x=withBreadcrumbs（路由，{disableDefaults:true}）（Breadcrumbs）；
常量PrivateRoute=（{component，…rest}:RouteProps）=>{
...
常量呈现=（props:RouteComponentProps）：React.ReactNode=>{
...
}   
} 
导出默认路径；
导出{x作为面包屑}；
如果你想要这个.props.history.push，那么你必须使用withRouter HOC导出你的组件。
嗨，我想你不需要应用程序中的路由器组件，withRouter HOC正常情况下，它已经通过安装npm包解决了这个问题。SOF中有一篇关于同一问题的帖子，作者给出了他/她创建的npm包的链接。遗憾的是，找不到原来的帖子。它只适用于ReactJS，我刚刚使它在React+TS中可用。npm包是。下面是我的代码片段：

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

src/react路由器全局历史记录.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;
}

//
/// 
/// 
//从'expect'导入{any}；
从“历史”导入{History}
声明模块“反应路由器全局历史记录”{
导出常量ReactRouterGlobalHistory:React.ComponentType；
导出默认函数getHistory（）：历史；
}

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

import*作为来自“React”的React
从“react Router dom”导入{BrowserRouter as Router}；
从“react router dom”导入{withRouter}；
从“react router”导入{RouteComponentProps}；
...
从“反应路由器全局历史记录”导入{ReactRouterGlobalHistory}；
从“反应路由器全局历史记录”导入getHistory；
...
导出接口分派道具{
....
}
导出接口AppProps{
加载？：布尔值；
...
}
界面状态{
...
}
类型Props=DispatchProps&AppProps&RouteComponentProps；
导出类应用程序扩展React.Component{
建造师（道具：道具）{
超级（道具）；
此.state={
...
}
}
render（）{
...
返回(
.....
)
}
...
onClickHandler（someParam:string，event:React.MouseeEvent）=>{
event.preventDefault（）；
....
getHistory（）.push（'/some path'）；
}
}
导出默认应用程序；

PS：我的应用程序是使用create react app创建的
您可以参考此内容，请参见@Squiggs.using BrwoserRouter…无法更改此内容。@elvis_ferns谢谢…如果我添加withRouter（应用程序），则index.tsx将抛出错误。错误类似于“{}缺少位置，匹配…”等。尝试在应用程序组件中添加RouteComponentProps，但仍显示错误。正在尝试使用npm包“react router global history”，该包没有typescript类型。正在使用declare模块。@Souvik请共享App.tsx和Routes.tsx不工作的片段。在index.tsx中显示错误…错误类似于“{}缺少位置，匹配…”您使用过路由器hoc吗？如果是的话，你能给我看一下代码吗。
/// <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;
}

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;