Wie erhalten Params Werte in MapStateToProps mit React-Router v4?

Question

Ich benutze react-router v4, react-router-dom, redux und react-redux, damit meine App funktioniert. Aber wenn ich die deckId bekommen will, kann ich die params nicht bekommen, es hat nur Kinder prop in ownPros Argument.

Meine Hauptkomponente wie folgt aussieht

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

und die App-Komponente wie diese

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

I withRouter verwendet redux verbinden zu-Router zu reagieren, aber es doesn `t entweder helfen. Was soll ich machen ? Irgendwelche Ideen?

Answer 1

Der Reaktiv-Router params wurde von this.props.params der Komponente in this.props.match.params verschoben.

Es sieht so aus, als ob Ihre mapStatesToProps auf ownProps.match.params.deckId aktualisiert werden muss.