Сделайте файл history.pu sh доступным в приложении React app.tsx

Question

Использование React 16 с Typescript. Внутри метода обработчика кликов в app.tsx мне нужно перенаправить, чтобы перенаправление происходило с любого экрана в приложении. Но нельзя использовать this.props.history.push в app.tsx. Мы использовали BrowserRouter в app.tsx. Мне также нужно подобное перенаправление из модального компонента, но кажется, что история недоступна во всем приложении (включая app.tsx). Есть ли способ добиться этого? Я пробовал много разных вещей, ничего не работает. Мне нужно сделать файл history.pu sh доступным для всего приложения, для каждого компонента, включая app.tsx ... это возможно?

Это мой файл app.tsx (скопированный из оригинального, не детали generi c заменены на ...)

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);

Вот мой route.tsx (скопированный из оригинальных деталей c, не принадлежащих стандарту, замененных на ...)

    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

Привет, я думаю, вам не нужен компонент Router в приложении, обычно с withRouter HO C он имеет

Answer 2

Я решил проблему, установив пакет npm. Здесь, в SOF, было сообщение на ту же тему, и автор дал ссылку на созданный им пакет npm. К сожалению, не смог найти оригинальный пост. Это только для ReactJS, и я только что сделал его пригодным для использования в React + TS. Пакет npm: response-router-global-history . Ниже приведены мои фрагменты кода:

Это недавно созданный файл, поскольку @types недоступен для вышеуказанного пакета

src / реагировать на маршрутизатор-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 (скопирован из оригинальных, не универсальных c деталей, замененных многоточием)

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-реагировать-приложение

Answer 3

Если вы хотите this.props.history.pu sh, вы должны экспортировать свой компонент с помощью withRouter HO C.