Question

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

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

主页
第1类
- 详情页面
第2类
- 详情页面
文章 - 类别3
- 详情页面

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

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

文章数组本身包含文章的名称和参数文章名称，f.e。 此-是-AN-制品。我正在将文章名称参数传递给详细信息组件，该组件根据此参数和页面参数查看正确的文章。

好的，我希望这很清楚。现在，这是我的 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使用带有Babel的ES6），但当然有一些。

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

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

类别组件（使用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

我从未见过在路径前使用:，我甚至检查了文档以查看是否有例子但找不到一个，也许我错过了它，{{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>

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

带参数的嵌套路由（/：foo /：bar）不呈现，为什么？

1 个答案: