Javascript 我应该使用react路由器作为选项卡组件吗？

我希望构建一个选项卡组件，其中一些选项卡将包含动态内容。我最初开始学习本教程：

---

在阅读react路由器之后，它似乎也可以解决这个问题。什么是更好的方法和/或它有什么不同？

是的，这是React Router的完美工作，因为它专注于简化单页应用程序的URL重定向过程

导航选项卡的使用案例肯定属于React Router的范围。您可以使用React Router 3或4进行此操作，但是和文档看起来很棒

您可以在上面的链接中找到一个有用的示例，它显示了与选项卡链接是多么容易。这将讨论如何创建带有自定义链接的选项卡

一个“<强> GoCHAs”，尽管您可能要考虑，如果在导航到另一条路径并导航回到先前的路径时，恢复滚动位置有一定的困难。以下是进一步讨论此问题的线程：

如果恢复滚动位置对您来说非常重要，那么此时React Router可能不是选项卡的最佳选择

更新：

React router v4已经发布，上面的问题已经解决，现在文档中有一个指南

---

我在设置这个时遇到了很多问题（2017年11月20日），我想我应该在这里为后代发布最终设置。我使用的是

react路由器dom 4.2.2

和

材质ui 0.19.4

。基本上，您希望在用户单击选项卡时更改哈希（#），并使用哈希查找要显示的选项卡。它工作得很好，但不幸的是它增加了一点点延迟，不知道为什么，如果我弄明白了，它会更新

import React, { Component } from 'react';
import { Tabs, Tab } from 'material-ui/Tabs';

export default class TabsComponent extends Component {
    constructor(props) {
        super(props);
        this.onActive = this.onActive.bind(this);
        this.getDefaultActiveTab = this.getDefaultActiveTab.bind(this);

        this.tabIndices = {
            '#firsttab': 0,
            '#secondtab': 1
        };
    }
    onActive(tab) {
        const tabName = tab.props.label.toLowerCase();
        this.props.history.replace(`#${tabName}`); // https://reacttraining.com/react-router/web/api/history
    }
    getDefaultActiveTab() {
        const hash = this.props.location.hash;
        return this.tabIndices[hash];
    }
    render() {
        return (
            <Tabs
                initialSelectedIndex={this.getDefaultActiveTab()}
            >
                <Tab
                    label="FirstTab"
                    onActive={this.onActive}
                >
                   // ...
                </Tab>
                <Tab
                    label="SecondTab"
                    onActive={this.onActive}
                >
                   // ...
                </Tab>
            </Tabs>
        );
    }
}

---

在选项卡视图之间导航时，

react router

是否会销毁组件？如果每个选项卡上都有动态内容，我不希望每次切换时都重新加载它tab@Mirko当另一个路由匹配时，加载的组件将卸载。示例链接不再工作，只会将您带到培训页面。@apaidnerd感谢您指出这一点！我刚刚更新了上面的链接：）

import React, { Component } from 'react';

import Tabs, { Tab } from 'material-ui/Tabs';
import Paper from 'material-ui/Paper';

import { withRouter } from 'react-router-dom';

import Resources from '../resources/index.jsx';
import styled from 'styled-components';

const StyledTabs = styled(Tabs) `
margin:5px;
`;

class LinkableTabs extends Component {
    constructor(props) {
        super(props);
        this.getDefaultActiveTab = this.getDefaultActiveTab.bind(this);
        this.switchTab = this.switchTab.bind(this);

        this.state = {
            activeTabIndex: this.getDefaultActiveTab()
        }
    }
    getDefaultActiveTab() {
        const hash = this.props.location.hash;

        let initTabIndex = 0;
        this.props.tabs.forEach((x, i) => {
            const label = x.label;
            if (`#${label.toLowerCase()}` === hash) initTabIndex = i;
        });

        return initTabIndex;
    }

    switchTab(event, activeTabIndex) {
        this.setState({ activeTabIndex });

        //make shareable - modify URL
        const tabName = this.props.tabs[activeTabIndex].label.toLowerCase();
        this.props.history.replace(`#${tabName}`);
    }
    render() {
        const { match, location, history, staticContext, ...nonrouterProps } = this.props; //https://github.com/DefinitelyTyped/DefinitelyTyped/issues/13689#issuecomment-296246134
        const isScrollable = this.props.tabs.length > 2;
        return (
            <div>
                <Paper>
                    <StyledTabs
                        fullWidth
                        centered
                        scrollable={isScrollable}
                        onChange={this.switchTab}
                        value={this.state.activeTabIndex}
                        {...nonrouterProps}
                    >
                        {
                            this.props.tabs.map(x => <Tab key={x.label} label={x.label} />)
                        }
                    </StyledTabs>
                </Paper>
                {
                    this.props.tabs[this.state.activeTabIndex].component
                }
            </div>
        );
    }
}

export default withRouter(LinkableTabs);