Программная навигация в React router 4 с сочетанием компонентов функции / класса и TypeScript

Question

Я использую React Router 4 в приложении TypeScript, где у меня есть React.Component, который используется в React.FunctionalComponent.Мне нужно иметь возможность программно перейти к определенному маршруту изнутри React.Component, но я не могу понять, как передать маршрутизатор до дочернего компонента, чтобы я мог вызвать this.props.history.push().Что усложняет дело, так это то, что я тоже использую TypeScript.

Вот песочница для кода с рабочей демонстрацией моей компоновки компонентов: https://codesandbox.io/s/react-programmatic-routing-xebpg

А теперь компоненты:

app.tsx :

import * as React from 'react';
import { HashRouter } from 'react-router-dom';

import Header from './header';
import Footer from './footer';
import AppRouter from './app-router';

export default class App extends React.PureComponent {
    public render() {
        return (
            <HashRouter>
                <Header />
                <AppRouter />
                <Footer />
            </HashRouter>
        );
    }
}

header.tsx :

import * as React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { NavLink } from 'react-router-dom';

export default class Header extends React.PureComponent<any> {
    public render() {
        return (
            <Navbar>
                <Nav.Link as={NavLink} exact to="/home">
                    Home
                </Nav.Link>{' '}
                <Nav.Link as={NavLink} to="/customers">
                    Customers
                </Nav.Link>
            </Navbar>
        );
    }
}

app-router.tsx :

import * as React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './pages/home';
import Customers from './pages/customers';

const AppRouter: React.FC = () => {
    return (
        <div>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/home" component={Home} />
                <Route path="/customers" component={Customers} />
            </Switch>
        </div>
    );
};

export default AppRouter;

страниц / клиентов.tsx :

import * as React from 'react';
import MyFakeGrid from './customers-grid';

const Customers: React.FC = () => {
    return (
        <div>
            <p>This is the customers page</p>
            <MyFakeGrid />
        </div>
    );
};

export default Customers;

страниц / клиентов-grid.tsx :

import * as React from 'react';
import { NavLink } from 'react-router-dom';

export default class MyFakeGrid extends React.Component {
    public render() {
        return (
            <div style={{ borderColor: 'lightgray', borderStyle: 'solid' }}>
                <p>
                    I need to be able to route programmatically from this
                    component
                </p>
                <p>
                    but I can't just use a NavLink like 'Home' (below), I have
                    to be able to navigate from within a method
                </p>
                <NavLink to="/home">Home</NavLink>
            </div>
        );
    }
}

pages / home.tsx :

import * as React from 'react';

const Home: React.FC = () => {
    return (
        <div>
            <p>This is the home page</p>
        </div>
    );
};

export default Home;

Я недавно начал изучать React и не хочу переписывать свои компоненты на основе классов какфункциональные компоненты, которые стали довольно подробными / полезными, особенно если не учитывать стратегию постепенного принятия React 1039 *.

Answer 1

На основе Обучение React-роутеру , Вы можете получить доступ к свойствам объекта истории и совпадению ближайшего через компонент высшего порядка withRouter. withRouter будет передавать обновленные совпадения, местоположение и историю в упакованный компонент всякий раз, когда он рендерится. Например, вы можете переписать компонент Customer как удар:

import * as React from 'react';
import MyFakeGrid from './customers-grid';
import { withRouter } from "react-router";

const Customers: React.FC = () => {
    return (
        <div>
            <p>This is the customers page</p>
            <MyFakeGrid />
        </div>
    );
};

export default withRouter(Customers);

Теперь у вас есть доступ к истории и другим параметрам, как я уже сказал, и вы можете легко перемещаться между маршрутами.