React搭配react-router-dom v5与Context API出现render is not a function报错

• 你使用的react-router-dom v5版本中，<Switch>组件的直接子元素仅支持<Route>或<Redirect>组件，你将ContextProvider直接放在<Switch>内部、<Route>外部的写法不符合组件要求，因此触发TypeError: render is not a function报错
• 重复声明ContextProvider也属于多余代码，两个路由都需要这两个全局Provider，完全可以统一放在外层复用

将ContextProvider提到<Switch>外层包裹所有路由，修正后的App.js代码如下：

import logo from "./logo.svg";
import "./App.css";
import Login from "./pages/auth/signIn/Login";
import Messenger from "./pages/messenger/index";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import ChatContextProvider from "../src/helpers/chatContext/Index";
import CustomizerContextProvider from "../src/helpers/customizerContext/Index";
function App() {
  return (
    <Router>
      {/* 把两个Provider提到Switch外层，统一包裹所有路由 */}
      <CustomizerContextProvider>
        <ChatContextProvider>
          <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/homer" component={Messenger} />
          </Switch>
        </ChatContextProvider>
      </CustomizerContextProvider>
    </Router>
  );
}

export default App;

如果确实存在部分路由不需要这两个Provider的场景，可以把Provider放在<Route>的内部包裹对应组件，写法如下：

<Switch>
  <Route exact path="/">
    <CustomizerContextProvider>
      <ChatContextProvider>
        <Login />
      </ChatContextProvider>
    </CustomizerContextProvider>
  </Route>
  {/* 其他不需要Provider的路由可以直接写在这里 */}
  <Route exact path="/other" component={OtherComponent} />
</Switch>

内容的提问来源于stack exchange，提问作者Wani