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

Question

我正在设计一个多标签或多页面的javascript网络应用程序，允许根据您选择的标签更改网址。

我见过的最好的例子是由Zendesk完成的

通过称之为多标签，我是否正确描述了它？

可以关闭或打开标签，具体取决于点击的内容。

如何使用ReactJS创建这样的东西？如果有一个很好的教程，我也很乐意通读它。

Answer 1

这可以通过反应路由器轻松完成。如果您不熟悉react路由器，请转到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>

标签布局

/* 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>
    );
};

标签1和标签2看起来像这样

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

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