使用反应路由器

Question

我正在尝试创建一个工作网站。以下页面显示了用户从主页点击搜索按钮后显示的所有作业的列表。所以基本上这是第二页。

在这个页面中，我从url捕获所有搜索参数并从api获取数据，结果显示如下：

用户单击单个作业列表后，详细信息页面应加载到同一页面上，而不会更改标题和固定组件以及详细信息页面的唯一URL。预期结果如下所示：

我的问题： 我设法创建一个嵌套的Route，它在同一页面上呈现详细信息页面，并且还有一个唯一的URL。但它呈现在现有的工作清单之上。我的意思是，如果用户点击joblist1，详细页面呈现在子项列表之上（上面的列表：2,3,4）。但预期结果是仅在单击单个作业列表时呈现详细页面而不呈现作业列表。

我的代码：为了简洁起见，我只展示了部分代码。

1）jobs.js：将状态数据传递给子组件以显示列表。

return(
 <div>
   <div>
       fixed component
   </div>
   <div>
       <RouteHandler />
       <JobLists joblists={this.state.joblists} />
   </div>
 </div>
)

2）jobList.js：使用.map函数遍历所有数据并手动点击功能生成url，并在用户点击单个链接后打开该url。路由器捕获嵌套路由并在＆＃34;中的jobs.js中加载值。 ＆＃34;

handleClick: function(i){
   var base_path = window.location.protocol + '//' + window.location.host;
   base_path += '/#/jobs-detail';
   window.location= base_path;
},

render: function(){
    var jobListRow = this.props.joblists.map(function(jobrowobj, i){
        return(
        <div key={jobrowobj.id} onClick={this.handleClick.bind(this, i)}>
          <img src={jobrowobj.logo} alt="" />
          <h3>{jobrowobj.title}</h3>
        </div>
       )  
    }.bind(this));

    return(
        <ul id="joblists">
            {jobListRow}
        </ul>
    )
}

3）路线文件：

var routes = (
  <Route handler={App}>
    <DefaultRoute handler={Home} />
    <Route name="jobs" path="jobs" handler={Jobs}>
        <Route name="jobs-detail" handler={JobDetail} />
    </Route>
    <NotFoundRoute handler={NotFoundPage} />
  </Route>
);

我不确定在页面上切换某个部分（组件）的最佳方法是什么，就像在我的情况下在joblist组件和jobdetail组件之间切换一样。如您所见，我只能在现有组件的顶部加载其他组件，这不是预期的结果。

如果有任何提示在用户点击按钮时保持作业列表上的滚动位置，也会很感激。

Answer 1

我建议你将react-router升级到1.0.0-rc1，API更清晰。您的问题与official introduction类似。嵌套组件将作为this.props.children传递，您可以将其插入jobListRow。

关于滚动位置，有一个github issue讨论如何恢复它：）