Javascript 如何在水疗中心访问单个视图？

我有一个react js应用程序，其结构如下：

public
src
  components
    - Books.js
    - BookShow.js
  - App.css
  - App.js
  - index.js

在my package.json中，我使用以下节点模块：

{
  "name": "tester",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.6",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

在我的主站点中，我基本上是在尝试创建一个1页的应用程序，其中我们从books.json文件中列出书籍。我可以做到这一点，并且我可以很容易地在我的books.js文件中列出这些书籍，包括以下内容：

import React from 'react';
import { Link } from 'react-router';
export default React.createClass({


    getInitialState: function() {
        return {
          books: []
        }
      },

      componentDidMount: function() {
        this.request = fetch('https://gist.githubusercontent.com/madwork/adfae25c174bb246c650/raw/db225e4b9c74e1865da1c9cd54cf87d3dee171a5/book.json')
          .then((request) => request.json())
          .then((data) => this.setState({
            books: data,
            isLoading: false
          }))
      },

      componentWillUnmount: function() {
        this.serverRequest.abort();
      },

      render: function() {
        return (
          <div className="container">
            <h1>Books</h1>
            {this.state.books.map(function(book) {
              return (
                <div key={book.id} className="book col-lg-4 col-md-4 col-sm-4">
                <Link
                    to={"/books/"+book.id}
                    className="list-group-item"
                    key={book.id}>
                    {book.name}
                    <img className="img-responsive" src={book.cover} />
                </Link>
                  <h3>{book.name}</h3>
                  <p>{book.author.name}</p>
                  <i className="glyphicon glyphicon-heart">{book.likes}</i>
                </div>
              );
            })}
          </div>

        )
      }

})

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router'
import App from './App'
import Books from './components/Books'
import BookShow from './components/BookShow'
import './index.css'
import 'bootstrap/dist/css/bootstrap.css'



render((
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <Route path='/books' component={Books}>
        <Route path='/books/:id' component={BookShow}/>
      </Route>
    </Route>
  </Router>
), document.getElementById('root'))

从“React”导入React
从“react dom”导入react dom
从'react dom'导入{render}
从“react Router”导入{Router，Route，IndexRoute，browserHistory，hashHistory}
从“./App”导入应用程序
从“./components/Books”导入书籍
从“./components/BookShow”导入BookShow
导入“./index.css”
导入“bootstrap/dist/css/bootstrap.css”
渲染((
)，document.getElementById（'root'））

我真正想做的是让用户能够从列表中点击book对象，并获得这本书及其所有数据的单一视图。我已经按照我的逻辑设置了路线，但我想知道我在这里错过了什么窍门

如果这一切都错了，谁能帮我指出正确的地方，或者对我大喊大叫：）

---

标记

问题是，数据存在于Books组件中。而且您没有一个组件不可知的数据层

有不同的方法，比如Redux，它将把您的所有数据保存在一个全局存储中

另一种方法是构建自己的数据层。。它可以是一些简单的东西，比如由api方法填充的对象。因此，您的api方法可以在向后端发送请求之前查找缓存项

实际上，这是无限的选择。。您也可以在每次有人访问book/：id页面时调用后端，然后加载书籍

所以，这取决于你的知识，时间。。以及你想要付出的努力。 每种解决方案都有其优缺点

---

就我个人而言，我将首先创建一个单独的api模块，它将执行api调用。并为数据使用一些全局存储。如果数据几乎是静态的，我会尝试首先在本地找到这本书，如果它不在那里，则调用后端->本地存储->将它返回给组件

在某些情况下，使用Redux很好，在某些情况下，这是一种开销。 然而，值得一试

import React from 'react'
import ReactDOM from 'react-dom'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router'
import App from './App'
import Books from './components/Books'
import BookShow from './components/BookShow'
import './index.css'
import 'bootstrap/dist/css/bootstrap.css'



render((
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <Route path='/books' component={Books}>
        <Route path='/books/:id' component={BookShow}/>
      </Route>
    </Route>
  </Router>
), document.getElementById('root'))