使用ReactJS支持URL的多选项卡javascript应用程序

我正在设计一个多选项卡或多页面javascript web应用程序，它允许URL根据您选择的选项卡进行更改

我见过的最好的例子是Zendesk

通过称之为多选项卡，我是否正确地描述了它

根据单击的内容，可以关闭或打开选项卡

---

如何使用ReactJS创建类似的东西？如果有一个好的教程，我也很乐意阅读。

这可以通过react router轻松完成。如果您不熟悉react router，请转到github页面，查看教程和文档。下面是一个让你行动起来的例子

路线

<Route path="/" component={Application}>
    <IndexRoute component={Home}/>
    <Route path="tabs" component={TabLayout}>
        <Route path="1" component={Tab1} />
        <Route path="2" component={Tab2} />
    </Route>
    <Route path="about" component={About}/>
    <Route path="*" component={NotFound} isNotFound/>
</Route>

// Tab1 and Tab2 are just react components. For simplicity I am just using
// a stateless component.

const Tab1 = props => {
    return (
        <h1>Tab 1</h1>
    );
};

选项卡布局

/* This is the layout for your tabs. Using react router to link to different tabs.
When the route changes props.children will be updated to reflect the current
route. You can add active classes to your tabs. Reference the react-router docs to 
see how to do that
*/

import {Link} from 'react-router';

const TabLayout = props => {
    return (
        <section className="tab-container">
            <div className="tabs">
                <Link to="/tabs/1">Tab 1</Link>
                <Link to="/tabs/2">Tab 2</Link>
            </div>
            <div className="content">
                {props.children}
            </div>
        </section>
    );
};

/*这是选项卡的布局。使用react路由器链接到不同的选项卡。
当路线更改时，道具将更新，以反映当前路线
路线。您可以将活动类添加到选项卡中。参考react路由器文档
看看怎么做
*/
从“反应路由器”导入{Link}；
const TabLayout=props=>{
返回(
表1
表2
{props.children}
);
};

表1和表2如下所示

<Route path="/" component={Application}>
    <IndexRoute component={Home}/>
    <Route path="tabs" component={TabLayout}>
        <Route path="1" component={Tab1} />
        <Route path="2" component={Tab2} />
    </Route>
    <Route path="about" component={About}/>
    <Route path="*" component={NotFound} isNotFound/>
</Route>

// Tab1 and Tab2 are just react components. For simplicity I am just using
// a stateless component.

const Tab1 = props => {
    return (
        <h1>Tab 1</h1>
    );
};

//Tab1和Tab2只是react组件。为了简单起见，我只是使用
//无状态组件。
const Tab1=props=>{
返回(
表1
);
};