Reactjs 使用react路由器中的嵌套路由在页面上的特定组件之间切换

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

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

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

我的问题： 我设法创建了一个嵌套路由，该路由在同一页面上呈现细节页面，并且具有唯一的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函数遍历所有数据，handleclick函数生成url，并在用户单击单个链接时打开该url。路由器捕获嵌套路由并在“”中加载jobs.js中的值

handleClick:函数（i）{
var base_path=window.location.protocol+'/'+window.location.host；
基本路径+='/#/jobs detail'；
window.location=基本路径；
},
render:function（）{
var jobListRow=this.props.joblists.map（函数（jobrowobj，i）{
返回(
{jobrowobj.title}
)  
}.约束（这个）；
返回(

{jobListRow}

)
}

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

var路由=(
);

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

---

如果在用户回击按钮时提示保持作业列表上的滚动位置，也将不胜感激。

我建议您将react路由器升级到1.0.0-rc1，API将更加清晰。您的问题与问题类似。嵌套组件将作为

this.props.children

传递，您可以将其插入

jobListRow

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

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