需要React Router Pro来帮助我

Question

所以今天我玩了反应路由器并尝试修改this example。

我想实现这个目标：

• 侧面导航仅显示名称

• 当用户点击名称时，页面会显示名称和所有项目。

示例：

点击饮品，页面看起来像这样

饮料

柠檬水

3

根啤酒

4

铁港

5

我的问题

app.js

const Item = ({ params: { category, item } }) => {
 const menuItem = data.lookupItem(category, item)

  return (
  <div>
   <h1>{menuItem.name}</h1>
   <p>${menuItem.price}</p>
  </div>
  )
}

我无法理解 params：{category，item} 是什么以及它来自何处。

如果您能够对解决方案有所帮助，那么只要知道自己在做什么，就会花费不到10分钟的时间，非常有帮助和赞赏。

Answer 1

params: { category, item }来自Router。如下面的代码片段，当您使用路由器时，该组件将从params获得Router道具。 params的值来自路径路径。 Item与路径/category/:category/:item匹配，因此{ category, item }的值来自路径路径的相应位置（:item和:category）。

<Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={App}>
      <Route path="category/:category" components={{ content: Category, sidebar: CategorySidebar }}>
        <Route path=":item" component={Item} />
      </Route>
    </Route>
</Router>