Navigate programmatically in React router 4 with mix of function/class components & TypeScript

Question

I'm using React Router 4 in a TypeScript app where I have a React.Component that's used within a React.FunctionalComponent. I need to be able to navigate programmatically to a particular route from within the React.Component, but I can't seem to figure out how to pass the router down to the child component so that I can call this.props.history.push(). What complicates matters is that I'm using TypeScript, too.

Here's a code sandbox with a working demo of my component layout: https://codesandbox.io/s/react-programmatic-routing-xebpg

And now, the components:

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;

pages/customers.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;

pages/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;

I've recently started learning React and I don't want to re-write my class-based components as functional components, which have become quite detailed/useful, especially not given React's gradual adoption strategy.

Answer 1

Base on React-router training, You can get access to the history object's properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders. For example, you can re-write Customer component as blow:

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

now you access to the history and other parameter as i said, and you can easily navigate between routes.