如何在 React-Router-Redux 中创建连接到 Redux 的母版页？答案

【问题标题】：How Can I Create MasterPage In React-Router-Redux That Connect To Redux?如何在 React-Router-Redux 中创建连接到 Redux 的母版页？
【发布时间】：2017-09-09 07:32:04
【问题描述】：

我想创建一个包含导航栏和登录配置文件部分的母版页。 Login-Profile 部分将连接 redux 以从 reducer 获取数据。我如何在应用程序上做到这一点？应用程序也在创建带有 store 参数的 Provider，所以我可以制作它的容器吗？我应该把我的母版页或其项目放在哪里？

注意：不是主页，母版！

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import { configureStore } from '../resources/redux/store';
import MainPage from './mainPage';
import Profile from './profile';
import Stream from './stream';
import Market from './store';

const store = configureStore();

export class App extends Component {

   render() {
     return (
      <Provider store={store}>
        <BrowserRouter>
          <Switch>
            <Route exact path='/' component={MainPage} />
            <Route path='/profile' component={Profile} />
            <Route path='/stream' component={Stream} />
            <Route path='/store' component={Market} />
          </Switch>
        </BrowserRouter>
      </Provider>
    );
  }
};

【问题讨论】：

标签： reactjs react-redux master-pages router react-router-redux

【解决方案1】：

对不起，我们可以将组件添加到提供程序中

   <Provider store={store}>
    <div>
      <MasterPage/>
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={MainPage} />
          <Route path='/profile' component={Profile} />
          <Route path='/stream' component={Stream} />
          <Route path='/store' component={Market} />
        </Switch>
      </BrowserRouter>
    </div>
  </Provider>

所以 MasterPage 可以成为使用 reducer 的容器。

【讨论】：