Question

这是一个简化的例子......

如果我想从路线传递（如果未指定子页面则重定向）：

    <Route path="/activities" component={PageElements.SectionPage} onEnter={App.RequireAuth}>
        <IndexRoute component={Activities.Redirect}/>
        <Route path="/activities/:page" component={Activities.PageSelector}  />
    </Route>

然后在PageElements中做一些魔术：

export class SectionPage extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        return <div>
            <SiteSubHeader location={this.props.location} />
            {this.props.children}
        </div>
    } 
}

然后想要在页面选择器中为一个部分渲染内容：

export class PageSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        this.pages = {
        "overview": <Overview />,
      // "overview": Overview,  // also doesn't work
        "another": <Another />,
        "yetanother": <YetAnother />
    }
        var page = this.props.params.page;
        return this.pages.page;
        // also a million variants of return <div>{this.pages.page}</div> don't work
        // this kind of thing DOES work:
        //   if (page == "overview") return <Overview />
    }

    const Overview = () => {
      return  <div>Overview</div> 
    } 

 }

基本上我正在寻找一种方法，可以轻松地从数据结构中生成许多页面和子页面。它们都是非常不同的，并且将与子组件等不同的布局。我是否以错误的方式进行此操作？我不想在渲染方法中有大量的ifs。

invariant.js：38 Uncaught Invariant Violation：PageSelector.render（）：A 必须返回有效的React元素（或null）。你可能已经回来了 undefined，数组或其他一些无效对象。

我觉得我在这里与React作战，所以我可能做错了什么。任何帮助将不胜感激。

React中的数据驱动路线/页面/子页面？

0 个答案: