Redux Provider在index.js中放置位置不当导致仅单个元素渲染问题咨询

问题原因 #

• 现有代码使用逗号运算符为routing变量赋值，JS中逗号运算符会依次执行所有表达式，仅返回最后一个表达式的结果，所以你当前的routing实际只包含Router部分，Provider包裹的<Idlist/>直接被丢弃，自然只能渲染单个内容。
• 层级结构错误：Provider的作用是向所有后代组件传递Redux的store实例，所以需要放在最外层，所有需要访问store的组件（包括Router、路由页面、Idlist等）都要放在Provider内部。

修正后代码 #

// 注意如果未导入Router相关组件需要先导入，此处以BrowserRouter为例
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store';
import Idlist from './components/Idlist';

import Signup from './Pages/Signup/Signup';
import MainScreen from './Pages/Home/MainScreen';


const routing = (
  {/* Provider放在最外层包裹所有需要使用Redux的组件 */}
  <Provider store={store}>
    {/* 全局展示的Idlist放在Provider内部即可正常访问store */}
    <Idlist />
    {/* Router也放在Provider内部，所有路由对应的页面组件都能正常调用Redux能力 */}
    <Router>
      <Switch>
        <Route exact path="/" component={Signup} />
        <Route path="/MainScreen" component={MainScreen} />
      </Switch>
    </Router>
  </Provider>
)

ReactDOM.render(
  routing,
  document.getElementById('root')
);

reportWebVitals();

如果Idlist不需要全局渲染，仅需在特定路由页面展示，直接放到对应页面组件内部即可，只要页面在Provider的包裹层级内，就能正常使用Redux的相关功能。

内容的提问来源于stack exchange，提问作者Gabriel Oliveira Menezes