Javascript 路由器和提供者继承

Javascript 路由器和提供者继承,javascript,reactjs,redux,react-router,Javascript,Reactjs,Redux,React Router,我正在学习React,希望使用React路由器的Redux。 供应商是在路由器内还是在路由器对面有关系?更好的办法是: <Provider store={store}> <Browser> // routes </Browser> </Provder> //路线 或 //路线 乍一看,我可以用这两种方法。我遗漏了什么吗?这取决于您是否要将路由状态与存储同步。例如,如果您正在使用,则需要首先设置提供程序,然后在内部设置路由器

我正在学习React,希望使用React路由器的Redux。 供应商是在路由器内还是在路由器对面有关系?更好的办法是:

<Provider store={store}>
  <Browser>
   // routes
  </Browser>
</Provder>

//路线


//路线

乍一看,我可以用这两种方法。我遗漏了什么吗?

这取决于您是否要将路由状态与存储同步。例如,如果您正在使用,则需要首先设置
提供程序
,然后在内部设置
路由器

从文档中:

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import reducers from '<project-path>/reducers'

// Add the reducer to your store on the `routing` key
const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)

// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render(
  <Provider store={store}>
    { /* Tell the Router to use our enhanced history */ }
    <Router history={history}>
      <Route path="/" component={App}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('mount')
)
从“React”导入React
从“react dom”导入react dom
从“redux”导入{createStore,CombineReducer}
从“react redux”导入{Provider}
从“react Router”导入{Router,Route,browserHistory}
从“react router redux”导入{syncHistoryWithStore,routerReducer}
从“/reducers”导入还原程序
//在'routing'键上将减速机添加到您的存储
const store=createStore(
组合传感器({
…减速器,
路由:路由导出器
})
)
//创建增强的历史记录,将导航事件与存储同步
const history=syncHistoryWithStore(浏览器历史记录,存储)
ReactDOM.render(
{/*告诉路由器使用我们的增强历史记录*/}
,
document.getElementById('mount')
)
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import reducers from '<project-path>/reducers'

// Add the reducer to your store on the `routing` key
const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)

// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render(
  <Provider store={store}>
    { /* Tell the Router to use our enhanced history */ }
    <Router history={history}>
      <Route path="/" component={App}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('mount')
)