由同一个父组件使用反应路由器处理的子路由答案

【问题标题】：Child route handled by the same parent's component using react router由同一个父组件使用反应路由器处理的子路由
【发布时间】：2015-07-20 12:30:02
【问题描述】：

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

/           -> 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 路由加载所需的页面，而不加载两次。

有什么办法吗？

【问题讨论】：

标签： pagination reactjs parent-child handler react-router

【解决方案1】：

使用App 处理程序两次按您预期的方式工作 - 它调用 Apptwice. However, the parent should only be used as the parentRoute Handler, and the children use their ownHandlers`。

要正确加载初始页面，请使用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 Default Handler Docs 有一个更实质性的例子：

<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 匹配时，它有一个去处。

希望这会有所帮助！

【讨论】：

感谢您的回复！这是我的第一个想法，但如果我需要在 paginated 中嵌套路由（实际上就是这种情况），它就不会真正起作用。

【解决方案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>
);

【讨论】：