reactjs - antd tabs 使用 react-router

Question

想知道是否有一种方法可以根据每个选项卡的嵌套路由呈现路由。

例如，当我们浏览到

http://localhost:3000/base/a
http://localhost:3000/base/b

我们希望有一个 base 组件，它提供某种布局，并根据我们点击的 tab 渲染 nested route 组件.

下面的示例在不使用 react-router 渲染选项卡组件的情况下工作。

下面是路由配置

<Route path={"/base:scope" } exact={true} { component: BaseComponent } />

下面的组件将呈现带有标签的页面

import { Layout, Tabs, Row, Col } from 'antd';
import { Link, NavLink, Route, Switch } from 'react-router-dom';
export class BaseComponent extends React.Component {

    public state = {
        collapsed: false,
    };

    private onCollapse = collapsed => {
        this.setState({ collapsed });
    }

    get tabs() {
        const { collaborators, integration, settings, configuration, billing, tokens, referrals } = this.props;
        return [
            {
                key: 'a',
                tab: 'a',
                component: ComponentA,
                path: '/base/a',
            },
            {
                key: 'b',
                tab: 'b',
                component: ComponentB,
                path: '/base/b',
            },
        ];
    }

    public componentWillReceiveProps(props) {
        if (!_.isEqual(_.get(this.props, 'match.url'), _.get(props, 'match.url'))) {
            this.setState({ key: _.get(props, 'match.url') });
        }
    }

    public render() {
        const { renderer, router } = this.context;
        const { onLogOut, match, user, profile } = this.props;

        return (
            <React.Fragment>
                <Header className={renderer.renderRule(styles.header, this.props)}>
                    <div className={renderer.renderRule(styles.title, this.props)}>
                        Account Settings
                    </div>
                </Header>
                <Content>
                    <div className={renderer.renderRule(styles.container, this.props)}>
                        <Tabs
                            animated={false}
                            defaultActiveKey={match.url}
                            onChange={key => router.history.push(key)}
                            className={`${renderer.renderRule(styles.tabs)}`}
                        >
                            {_.map(this.tabs, (record, index) => (
                                <TabPane
                                    key={record.path}
                                    className={renderer.renderRule(styles.pane)}
                                    tab={<span>{record.tab}</span>}
                                >
                                    {React.createElement(record.component, null, null)}
                                </TabPane>

                            ))}
                        </Tabs>
                    </div>
                </Content>
            </React.Fragment >
        );
    }
}

期望:

我们想写得更像 react-router 一样

<Routes path={"/base"} exact={false} component={ComponentBase} />
<Routes path={"/base/a"} exact={true} component={ComponentBase} />
<Routes path={"/base/b"} exact={true} component={ComponentBase} />

但在这种情况下，我们不知道如何渲染页面，因为 react 路由器不渲染页面，所以我们注意到选项卡但没有渲染内容。

这是修改后的组件，没有渲染内容，因为我们希望 react-router 渲染组件。

export class BaseComponent extends React.Component {

    public state = {
        collapsed: false,
    };

    private onCollapse = collapsed => {
        this.setState({ collapsed });
    }

    get tabs() {
        const { collaborators, integration, settings, configuration, billing, tokens, referrals } = this.props;
        return [
            {
                key: 'a',
                tab: 'a',
                path: '/base/a',
            },
            {
                key: 'b',
                tab: 'b',
                path: '/base/b',
            },
        ];
    }

    public componentWillReceiveProps(props) {
        if (!_.isEqual(_.get(this.props, 'match.url'), _.get(props, 'match.url'))) {
            this.setState({ key: _.get(props, 'match.url') });
        }
    }

    public render() {
        const { renderer, router } = this.context;
        const { onLogOut, match, user, profile } = this.props;

        return (
            <React.Fragment>
                <Header className={renderer.renderRule(styles.header, this.props)}>
                    <div className={renderer.renderRule(styles.title, this.props)}>
                        Account Settings
                    </div>
                </Header>
                <Content>
                    <div className={renderer.renderRule(styles.container, this.props)}>
                        <Tabs
                            animated={false}
                            defaultActiveKey={match.url}
                            onChange={key => router.history.push(key)}
                            className={`${renderer.renderRule(styles.tabs)}`}
                        >
                            {_.map(this.tabs, (record, index) => (
                                <TabPane
                                    key={record.path}
                                    className={renderer.renderRule(styles.pane)}
                                    tab={<span>{record.tab}</span>}
                                >
                                </TabPane>

                            ))}
                        </Tabs>
                    </div>
                </Content>
            </React.Fragment >
        );
    }
}

Answer 1

我尝试使用 antd Tabs 创建 RoutedTabs 组件。我为此添加了文档字符串。

import React from "react";
import PropTypes from "prop-types";
import { Tabs } from "antd";
import { Switch, Route } from "react-router-dom";

import _each from "lodash/each";
import _map from "lodash/map";
const { TabPane } = Tabs;
/**
 * RoutedTabs is Ant Design based dynamic navigation tabs component.
 * It takes router config as prop and render the component as well as update the window location corrosponding to the tab.
 * Example of routeConfig
 * overview: {
        label: "Overview",
        component: RestaurantOverview,
        getRoute: url => url
    },
    menu: {
        label: "Menu",
        component: Menu,
        getRoute: url => `${url}/menu`
    },
    "menu-holiday-slot": {
        label: "Menu Holiday Slot",
        component: MenuHolidaySlots,
        getRoute: url => `${url}/menu-holiday-slot`
    }
    This will render three tabs Overview, Menu, Menu Holiday Slot and routes based on what getRoute method returns.
 */
const RoutedTabs = props => {
    const { tabsProps, routeConfig } = props;
    const { url, path } = props.match;
    const tabToRouteMap = {};
    const routeToTabsMap = {};
    _each(routeConfig, (configObj, routeKey) => {
        const routeURL = configObj.getRoute(url);
        tabToRouteMap[routeKey] = routeURL;
        routeToTabsMap[routeURL] = routeKey;
    });
    const defaultActiveKey = routeToTabsMap[props.history.location.pathname];
    const tabPaneNodes = _map(routeConfig, (configObj, routeKey) => (
        <TabPane tab={configObj.label} key={routeKey} />
    ));
    const routeNodes = _map(routeConfig, (configObj, routeKey) => (
        <Route
            path={configObj.getRoute(path)}
            exact
            key={routeKey}
            component={configObj.component}
        />
    ));
    const onTabChange = activeKey => {
        props.history.push(tabToRouteMap[activeKey]);
    };
    return (
        <>
            <Tabs {...tabsProps} onChange={onTabChange} defaultActiveKey={defaultActiveKey}>
                {tabPaneNodes}
            </Tabs>
            <Switch>{routeNodes}</Switch>
        </>
    );
};

RoutedTabs.propTypes = {
    tabsProps: PropTypes.object.isRequired, // As per https://ant.design/components/tabs/#Tabs
    routeConfig: PropTypes.object.isRequired,
    match: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
};

export default RoutedTabs;