如何使用 React-router 创建包含可路由项目的列表？答案

【问题标题】：How to create a list with routable items with React-router?如何使用 React-router 创建包含可路由项目的列表？
【发布时间】：2016-11-07 05:04:17
【问题描述】：

我想在列表元素中创建一个详细信息视图例如：

项目：/项目

<li>item 1</li>
<li>item 2</li>
<li>item 3</li>

项目预览：/list/2

<li>item 1</li>
<li><ItemPreview>more details for item 2</ItemPreview></li>
<li>item 3</li>

我的想法是将来自路由器的childrens 传递给Item 组件......但是传递所有项目特定值太麻烦了。但是有没有很好的通用方法呢？

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案1】：

我写了一个JsFiddle that demonstrates a list with routable items。它使用 Navigation router 而不是 React Router，但我希望你对此持开放态度。您可以看到我将项目列表传递给 Items 组件，并将选定的 Item 传递给 Item 组件。 Item 组件是一个超链接，使用路由器的 RefreshLink 构建。单击超链接会向下传递所选项目编号，并且项目组件会更改所选项目的显示。如果您对代码有任何疑问，请告诉我。

var {StateNavigator} = Navigation;
var {RefreshLink} = NavigationReact;

var Items = ({items, id, stateNavigator}) => (
  <ul>
    {items.map((item, i) => (
      <Item
        item={item}
        id={i}
        selected={i === id}
        key={i}
        stateNavigator={stateNavigator} />
    ))}
  </ul>
);

var Item = ({item, id, selected, stateNavigator}) => (
  <li>
    <RefreshLink
      navigationData={{id: id}}
      disableActive={true}
      stateNavigator={stateNavigator}>
      {!selected ? item : 'more details for ' + item}
    </RefreshLink>
  </li>
);

var stateNavigator = new StateNavigator([
  {key: 'items', route: '{id?}'}
]);

stateNavigator.states.items.navigated = (data) => {
  ReactDOM.render(
    <Items
      items={['item 1', 'item 2', 'item 3']}
      id={data.id}
      stateNavigator={stateNavigator} />, 
    document.getElementById('container')
  );
};

stateNavigator.start();

【讨论】：

谢谢 Graham，看起来不错 .. 唯一的问题是，我的应用使用了 react-router，替换所有东西的工作量太大了..