向 React/Firebase 应用添加路由

Question

刚开始将 React 路由添加到 React/firebase 应用程序。我有这段代码来读取数据，

const fb = firebase  
.initializeApp(config)
.database()
.ref();

fb.on('value', snapshot => {  
  const store = snapshot.val();
  ReactDOM.render(
       <App {...store} />
    ,
    document.getElementById('root')
  );
});

这工作正常，应用程序实时更新。 然后我开始玩Router，

ReactDOM.render(
   <Router>
    <Route path="/" component={App {...store}} />
  </Router>
   ,
  document.getElementById('root')
);

但是 {...store} 给出了一个错误，意外的标记。我应该将 Firebase 代码从树的下方移到 App 组件中还是有其他方法？

Answer 1

呃，component= 不会拿你在ReactDOM.render() 那里的那个东西

正如你现在所拥有的那样：商店将是未定义的......所以设置：

let store = {} // at the top

您的实际组件/类在哪里定义？ 你也不应该根据 Firebase 出现的时间来创建渲染，你应该先渲染，然后当 firebase 出现时你可以更新状态。

因此，这里有很多需要修复的地方，然后才能正常工作。

这是我的 index.js：

还要注意 store 是 configureStore 的结果（我假设你想使用 Redux，因为你有一个 store）...

import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './root/containers/Root'
import './index.css'
import configureStore from './root/store'
import { syncHistoryWithStore } from 'react-router-redux'
import { browserHistory } from 'react-router'

const store = configureStore()
const history = syncHistoryWithStore(browserHistory, store)


render(
  <Root store={store} history={history} />,
  document.getElementById('root')
);

我的商店：

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import reducer from '../reducers'
import { database, initializeApp } from 'firebase'
import { firebaseConfig } from '../constants'
initializeApp(firebaseConfig)
export const rootRef = database().ref().child('/react')
export const dateRef = rootRef.child('/date')

export default function configureStore(preloadedState){
  const store = createStore(
    reducer,
    preloadedState,
    applyMiddleware(thunkMiddleware, createLogger())
  )
  return store
}

还有我的根：

import React, { Component, PropTypes } from 'react'
import { Provider } from 'react-redux'
import routes from './routes'
import { Router, } from 'react-router'

class Root extends Component {
  render() {
    const { store, history } = this.props
    return (
      <Provider store={store}>
        <Router history={history} routes={routes} />
      </Provider>
    )
  }
}

Root.propTypes = {
  store: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired
}

最简单的入门版本：

import React, { Component } from 'react'
import { firebaseConfig } from '../constants' //this is a must otherwise you have multiple versions of firebase running around...
initializeApp(firebaseConfig)
export const rootRef = database().ref().child('/root')

class App extends Component {
componentDidMount(){
    initializeApp(firebaseConfig)
    this.state = {store: {}}

    rootRef.on('value', snapshot => {
       this.setState({store: snapshot.val()});
    }

}
render(){
let { store } = this.state
let childrenWithProps = React.Children
.map(this.props.children, function(child) {
        return React.cloneElement(child, { store: store });
});


return <div>
{JSON.stringify(store)}
{childrenWithProps}
</div>
}

}
const Routes = (<Route component={App}><Route component={Comp1} path='/earg'/><Route component={Comp2} path='/earg'/></Route>)

render(Routes, document.getElementById('root'))

这是很多代码，您还需要更多代码才能完成...我可能会推荐一个教程...

Answer 2

最后，为了一个快速的解决方案，我使用了一个匿名函数来包装组件，

   <Route path="/" component={() => (<App {...store} />)} />