使用 function/class 组件和 TypeScript 的组合在 React router 4 中以编程方式导航

Question

我在 TypeScript 应用程序中使用 React Router 4，其中我有一个 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;

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;

我最近开始学习 React，我不想将基于 class 的组件重写为功能组件，这些组件已经变得非常 detailed/useful，尤其是考虑到 React 的 gradual adoption strategy.

Answer 1

基于React-router training，您可以通过withRouter higher-order 组件访问历史对象的属性和最接近的匹配项。 withRouter 会在渲染时将更新的匹配、位置和历史属性传递给包装的组件。例如，您可以 re-write 客户组件如下所示：

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

现在您可以像我说的那样访问历史记录和其他参数，并且可以轻松地在路线之间导航。

使用 function/class 组件和 TypeScript 的组合在 React router 4 中以编程方式导航

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

typescript

reactjs

react-router

react-router-v4

react-router-dom