带参数的嵌套路由（/:foo/:bar）不渲染，为什么？

Question

所以，我不确定我是否应该以不同的方式构建我的应用程序，或者我是否在做一些根本错误的事情。我有点困惑，但让我们先解释一下。

在第一个导航级别中，有 4 个页面 - 每个页面都有一个详细信息页面。

• 首页
• 第 1 类物品
  • 详情页
• 第 2 类物品
  • 详情页
• 第 3 类物品
  • 详情页

文章类别页面完全相同。它们都有一个包含 10-20 篇文章的列表 (<ul><li><Link></Link></li><li>...</ul>)，所以我实际上只创建了一个组件，文章类别组件。

为了完成这项工作，应用程序的主导航包含<Link>，其中有一个名为page 的参数传递给文章类别 组件。根据此参数，视图在数组中查找文章并使用另一个组件将它们呈现为列表。

文章数组本身包含文章的名称和参数文章名称，f.e. 这是一篇文章。我将文章名称参数传递给详细信息组件，该组件根据此和页面参数查找正确的文章。

好的，我希望这很清楚。现在，这是我的 react-router 配置：

export default (
    <Route path="/" handler={App}>
        {/* Home */}
        <DefaultRoute name="home" handler={Home}/>

        {/* Page */}
        <Route name="category" path=":category" handler={Category}>
            <Route name="category.article" path=":article" handler={Article} />
        </Route>

        {/* Not found */}
        <NotFoundRoute handler={NotFound} />
    </Route>
);

.. 但这不起作用。如果我单击具有正确参数的文章链接，则不会发生任何事情 - 好吧，URL 会更改，但没有其他任何内容......并且导航菜单项保持活动状态，这很好。我至少知道参数是正确的，因为当我将/* Page */ 下面的路由配置更改为：

    <Route name="category" path=":category" handler={Category} />
    <Route name="category.article" path=":category/:article" handler={Article} />

它可以工作，但是在我的主导航中，当我在文章（详细）页面上时，naivgation 项不再处于活动状态，我猜是因为它不再是子路由，所以上面的配置应该是正确的一个，但它不起作用..

下面是相关组件及其代码+内容数组/对象。请注意，显示的代码没有任何导入（我通过 Webpack 使用 ES6 和 Babel），但当然有一些。

文章组件（呈现文章本身）

let Article = React.createClass({
    getInitialState() {
        return {
            article: this.props.params.article,
            category: this.props.params.category
        }
    },
    componentWillReceiveProps(nextProps) {
        this.setState({
            article: nextProps.params.article,
            category: nextProps.params.category
        })
    },
    render() {
        let content = this._getContent();

        return (
            <div className="page_content page_content-article">
                <ArticleHeader />
                {content}
            </div>
        )
    },
    _getContent() {
        let item;

        for(item of ContentStore[this.state.category]) {
            if(item.name === this.state.article) {
                return item.content;
            }
        }
    }
});

Category 组件（使用 ArticleList 组件呈现文章列表，该组件仅使用类别和文章参数呈现，并且每个类别都相同）

let Index = React.createClass({
    getInitialState() {
        return {
            category: this.props.params.category
        };
    },
    componentWillReceiveProps(nextProps) {
        this.setState({
            category: nextProps.params.category
        });
    },
    render() {

        return (
            <div className={'page_content page_content-' + this.state.category}>
                <ArticleList articles={this._getArticles()} category={this.state.category} />
            </div>
        )
    },
    _getArticles() {
        return ContentStore[this.state.category];
    }
});

应用组件

let App = React.createClass({
    render() {
        return (
            <div className="page">
                <RouteHandler />
                <Navigation />
            </div>
        )
    }
});

PageStore（数据示例 - 呈现主导航）

PageStore: [
    {
        id: 1,
        title: 'Home',
        iconClass: 'home',
        linkTo: 'home',
        params: null
    },
    {
        id: 2,
        title: 'Category 1',
        iconClass: 'foo',
        linkTo: 'category',
        params: {
            category: 'foo',
        }
    },
    ...
]

ContentStore（数据示例 - 呈现文章列表和详细视图，因为它具有其内容）

ContentStore: {
    // "foo" is the category name
    foo: [
        {
            id: 1,
            name: 'article-1',
            linkText: 'Article 1',
            content: (
                <div>
                    lorem ipsum...
                </div>
            )
        },

    ]
} 

我有两个问题：

• 我缺少什么以及如何完成这项工作？
• 即使我可以，我是否应该真正完成这项工作，还是有更好的方法？我这样做是因为类别页面和详细信息页面除了内容之外没有任何区别，内容（还）来自一个简单的数组。

我还问我是否真的应该这样做，因为好吧.. 我从来没有看到嵌套路由，父母和孩子都有道具。也许这实际上是一件坏事。我不确定。如果您需要更多信息，我很乐意提供并提前感谢您。

Answer 1

在路径之前我从未见过: 的用法，我什至查看了文档以查看是否有示例但找不到，也许我错过了，: 用于据我所知的参数。无论如何，试试这个：

<Route path="/" handler={App}>
    {/* Home */}
    <DefaultRoute name="home" handler={Home}/>

    {/* Page */}
    <Route path="category" handler={Category}>
        <Route path="category/article" handler={Article} />
    </Route>

    {/* Not found */}
    <NotFoundRoute handler={NotFound} />
</Route>

看看这是否能让页面现在正常工作，而不是从那里开始。