Reactjs 如何在react路由器中包含布局模板？

我在react应用程序中使用redux、react路由器和react路由器redux。因此，这是一个简单的应用程序，在这个应用程序中，我需要使用一个简单的路由视图。我已经阅读了文档，可以毫无问题地创建mi route，但在routes添加模板时，我遇到了问题。我需要将reducer的调度和状态传递给视图和模板，以便可以操作模板中的微调器和其他元素。我不确定我是如何制作的，或者我是否制作正确。 你能帮帮我吗

这是我的路由器代码：

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {Route} from 'react-router';
import {ConnectedRouter} from 'react-router-redux';
import {Switch} from 'react-router-dom';

import {store, history} from './store/index';
import Layout from './components/Layout';
import './bootstrap-3/css/bootstrap.min.css';

/* Components */
import Home from './components/abouts/home';
import About from './components/abouts/about';
import NoMatch from './components/abouts/nomatch';
import Artists from './components/artists';

const NodeId = document.getElementById('root');

ReactDOM.render(
    <Provider store={store}>
    <ConnectedRouter history={history}>
        <Layout>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/artists" component={Artists}/>
                <Route component={NoMatch}/>
            </Switch>
        </Layout>
    </ConnectedRouter>
</Provider>, NodeId);

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“反应路由器”导入{Route}；
从“react router redux”导入{ConnectedRouter}；
从'react router dom'导入{Switch}；
从“/store/index”导入{store，history}；
从“./components/Layout”导入布局；
导入“./bootstrap-3/css/bootstrap.min.css”；
/*组成部分*/
从“./components/abouts/Home”导入主页；
从“./components/About/About”导入关于；
从“./components/abouts/NoMatch”导入NoMatch；
从“/组件/艺术家”导入艺术家；
const NodeId=document.getElementById（'root'）；
ReactDOM.render(
，NodeId）；

所以我不确定如何传递redux状态和route的dispatched to组件，所以我在每个组件中都做了类似的事情，我想有一种更好的方式来做

import {connect} from 'react-redux';
import * as artistActions from './actions/artistActions';
import * as globalConfigActions from './actions/globalConfigActions';


class Abouts extends Component {
    render() {
        console.log('Abouts Component: ', this);
        return (
          <div>
            <h1>About</h1>
          </div>
        );
    }
}

const mapStaeToProps = (state) => {
    return {
      artist: state.artist,
      globalConfig: state.globalConfig
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchArtist: () => {
            return dispatch(artistActions.fetchArtist());
        },
        globalConfigActions: {
          showSpinner: () => {
              dispatch(globalConfigActions.showSpinner());
          },
          hiddenSpinner: () => {
              dispatch(globalConfigActions.hiddenSpinner());
          }
        }
    }
};

export default connect (mapStaeToProps, mapDispatchToProps)(About);

从'react redux'导入{connect}；
从“/actions/artistActions”导入*作为artistActions；
从“./actions/globalconfigations”导入*作为globalconfigations；
类Abouts扩展组件{
render（）{
log（'Abouts Component:'，this）；
返回(
关于
);
}
}
const mapstateprops=（状态）=>{
返回{
艺术家：国家艺术家，
globalConfig:state.globalConfig
}
};
const mapDispatchToProps=（调度）=>{
返回{
艺术家：（）=>{
退货派送（artistActions.fetchArtist（））；
},
全球冲突：{
showSpinner:（）=>{
分派（globalconfigations.showSpinner（））；
},
hiddenSpinner:（）=>{
分派（globalconfigations.hiddenSpinner（））；
}
}
}
};
导出默认连接（MapStateToprops、mapDispatchToProps）（关于）；

对于这种形式，我可以将状态和分派给组件传递给每个主组件，但我需要将状态和分派给模板，当我尝试使用模板时，路由不起作用，视图也不会更改

如果我使用一个没有redux的“mapDispatchToProps”和“mapstateToprops”的简单模板，它工作得很好，但是布局无法访问redux的方法或状态

有人能告诉我怎么做才能正确吗

多谢各位