ReactJS的新手需要简单的spa

Question

我需要查看所有三个组件的一些代码片段。

我想制作this simple single page app。

它由三个组件组成：App，Nav和Container。

数据来自这种形式的api：

 [{
  "category": "dogs",
  "available": [
   {
     "name": "pedro",
     "breed": "chihuahua"
   },
   {
     "name": "roxane"
     "breed": "beagle"
   }
  ]
 },
 {
  "category": "cat",
  "available": [
  {
    "name": "garfield",
    "breed": "tobby"
  }
 ]
}]

导航显示所有类别。

Container显示当前选定的类别，以及该类别的所有名称 - 品种对。

示例：点击 Dogs

狗

佩德罗

吉娃娃

的Roxane

比格尔

我的担忧

目前我无法使用导航栏路由并显示所选类别的所有名称 - 品种对。

我知道有两种方法可以做到这一点：

1-使用express表示路由，反应控制器用于fetch

2-同构反应获取，反应路由器，redux存储状态