需要一个 React Router Pro 来帮助我

Question

所以今天玩弄了react router，尝试修改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。如以下代码 sn-p，当您使用路由器时，组件将从 Router 获取 params 属性。 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>