如何使用react-router v4在mapStateToProps中獲取params值？

我使用react-router v4，react-router-dom，redux和react-redux來使我的應用程序工作。但是當我想要得到甲板牌時，我不能得到這些參數，它只有兒童道具在自己的方案論證中。如何使用react-router v4在mapStateToProps中獲取params值？

我的主要成分是這樣的

import React from 'react'; 
import {render} from 'react-dom'; 
import {createStore, combineReducers} from 'redux'; 
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; 
import createBrowserHistory from 'history/createBrowserHistory'; 
import {syncHistoryWithStore, routerReducer} from 'react-router-redux'; 
import {Provider} from 'react-redux'; 

import * as reducers from './reducers'; 
reducers.routing = routerReducer; 

import App from './components/App'; 
import VisibleCards from './components/VisibleCards'; 


const store = createStore(combineReducers(reducers)); 

const history = syncHistoryWithStore(createBrowserHistory(), store); 

function run() { 
let state = store.getState(); 
console.log(state); 
render(
<Provider store={store}> 
    <Router history={history}> 
     <App> 
      <Switch> 
       <Route exact path='/'/> 
       <Route path='/deck/:deckId' component={VisibleCards}/> 
      </Switch> 
     </App> 
    </Router> 
</Provider>, 
document.getElementById('root')); 
} 

run(); 

store.subscribe(run);

和應用程序組件這樣

import React from 'react'; 
import Sidebar from './Sidebar'; 
import {connect} from 'react-redux'; 



const mapStateToProps = (props, { params: { deckId } }) => ({ deckId }); 

const App = ({ deckId, children }) => { 
console.log(params); 
return (
    <div className="app"> 
     <Sidebar/> 
     <h1>Deck {deckId}</h1> 
     {children} 
    </div> 
); 
} 

export default connect(mapStateToProps)(App);

我用withRouter連接Redux的反應，路由器，但它不`噸幫助的。我該怎麼辦？任何想法？

來源

2017-06-13 BBC

反應路由器params已從組件的this.props.params移至this.props.match.params。

看起來你的mapStatesToProps需要更新到ownProps.match.params.deckId。

來源

2018-02-04 17:24:29 user650881

如何使用react-router v4在mapStateToProps中獲取params值？

回答

相關問題