Question

我在TypeScript应用程序中使用React Router 4，其中有一个React.FunctionalComponent中使用的React.Component。我需要能够以编程方式从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，并且我不想将基于类的组件重写为功能组件，这些组件已经非常详细/有用，尤其是在没有React的gradual adoption strategy的情况下。

Answer 1

基于React-router training，您可以通过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);

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

通过功能/类组件和TypeScript的混合在React Router 4中进行编程导航

1 个答案: