Javascript 如何使用react router v4获取MapStateTops中的参数值？

我使用react router v4、react router dom、redux和react redux使我的应用程序工作。但是当我想要得到deckId时，我不能得到params，它在ownProps参数中只有children prop

我的主要部件看起来像这样

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

从“React”导入React；
从'react dom'导入{render}；
从'redux'导入{createStore，combinereducer}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“历史记录/createBrowserHistory”导入createBrowserHistory；
从“react router redux”导入{syncHistoryWithStore，routerReducer}；
从'react redux'导入{Provider}；
从“./reducers”导入*作为减速机；
reducers.routing=routerReducer；
从“./components/App”导入应用程序；
从“./components/VisibleCards”导入VisibleCards；
const store=createStore（组合减速机（减速机））；
const history=syncHistoryWithStore（createBrowserHistory（），store）；
函数运行（）{
let state=store.getState（）；
console.log（状态）；
渲染(
,
document.getElementById（'root'）；
}
run（）；
存储。订阅（运行）；

还有像这样的应用程序组件

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

从“React”导入React；
从“./Sidebar”导入侧栏；
从'react redux'导入{connect}；
常量mapStateToProps=（props，{params:{deckId}}}）=>（{deckId}）；
常量应用=（{deckId，children}）=>{
控制台日志（params）；
返回(
甲板{deckId}
{儿童}
);
}
导出默认连接（MapStateTops）（应用程序）；

我用withRouter连接redux和react路由器，但也没用。我该怎么办？

---

有什么想法吗

react router

params

已从组件的

this.props.params

移动到

this.props.match.params

---

看起来您的

MapStateStorops

需要更新为

ownProps.match.params.deckId

react路由器

params

已从组件的

this.props.params

移动到

this.props.match.params

看起来您的

MapStateStorops

需要更新为

ownProps.match.params.deckId