使用react路由器由同一父组件处理的子路由

Question

我正在尝试为分页应用程序定义路由。

/           -> handled by App
/page/:page -> also handled by App

这些是我的路线：

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="paginated" path="page/:page" handler={App} />
    </Route>
);

这就是App的样子：

var App = React.createClass({
    render : function() {
        return (
            <div>
                <RouteHandler/>
                Something...
            </div>
        );
    }
});

问题在于，paginated是app的子路由，组件中的Something...会被渲染两次。

我在这里要做的是默认为app路线的第1页，并为paginated路线加载所需的网页，而不加载两次。

有什么办法吗？

Answer 1

使用App处理程序两次按预期方式工作 - 它调用App twice. However, the parent should only be used as the parent路由处理程序, and the children use their own处理程序。

要正确加载初始页面，请使用DefaultRoute作为基本路径：

<强>路由

var routes = (
    <Route name="app" path="/" handler={App}>
        <DefaultRoute handler={Home}/>
        <Route name="paginated" path="page/:page" handler={Page} />
    </Route>
);

应用

var App = React.createClass({
    render : function() {
        return (
            <div>
                <RouteHandler/>
            </div>
        );
    }
});

主

var Home = React.createClass({
    render : function() {
        return (
            <div>
                ...Something...
            </div>
        );
    }
});

页

var Page = React.createClass({
    render : function() {
        return (
            <div>
                ...Something Completely Different...
            </div>
        );
    }
});

React Router默认处理程序文档有一个更实际的例子：

<Route path="/" handler={App}>

  <!--
    When the url is `/`, this route will be active. In other
    words, `Home` will be the `<RouteHandler/>` in `App`.
  -->
  <DefaultRoute handler={Home}/>

  <Route name="about" handler={About}/>
  <Route name="users" handler={Users}>
    <Route name="user" handler={User} path="/user/:id"/>

    <!-- when the url is `/users`, this will be active -->
    <DefaultRoute name="users-index" handler={UsersIndex}/>

  </Route>
</Route>

请注意，<Route name="user" handler={User} path="/user/:id"/>也有默认路由，因此当没有:id匹配时，它就有了可以去的地方。

希望这有帮助！

Answer 2

最后，我想出了一个使用重定向的解决方案，允许我在paginated中使用分页和嵌套路由。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Redirect from="/" to="paginated" params={{ page : 1 }} />

        <Route name="paginated" path="page/:page" handler={PaginationLoader} />
    </Route>
);