路由器和提供程序繼承

Question

我正在學習React並希望使用Redux和React Router。 重要的是路由器內部的提供者還是相反的？什麼會更好：

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

或

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

在第一次看我可以用兩種方式。我錯過了什麼嗎？

Answer 1

這取決於您是否要將路由的狀態與商店同步。例如，如果您使用的是react-router-redux，則需要設置，Provider的第一個和Router裏面。

從文檔：

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') 
)