时间戳

首页 > 解决方案 > Reactjs TypeError：render is not a function in contrxt-api with react-router-dom

reactjs - Reactjs TypeError：render is not a function in contrxt-api with react-router-dom

问题描述

嗨，我正在我正在使用的这个项目中创建一个项目react router，并且context api。当我尝试使用context时。我正面临这个问题。这是我的App.js code。我正在使用 "react-router-dom": "^5.2.0",。我有两个组件Login，Messenger在里面router

//错误快照 在此处输入图像描述

//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>
      <Switch>
        <CustomizerContextProvider>
          <ChatContextProvider>
            <Route exact path="/" component={Login} />
          </ChatContextProvider>
        </CustomizerContextProvider>
        <CustomizerContextProvider>
          <ChatContextProvider>
            <Route exact path="/homer" component={Messenger} />
          </ChatContextProvider>
        </CustomizerContextProvider>
      </Switch>
    </Router>
  );
}

export default App;

//这是index.js文件

    import React from "react";
import ReactDOM from "react-dom";
import "./assets/scss/color.scss";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

//这里是我的登录组件。并且 Messenger 组件与 Login //组件相同

import React, { useState } from "react";
import { useHistory } from "react-router-dom";
//import firebase from "../../../config/firebase";
import { toast } from "react-toastify";

const Login = (props) => {
  const [credential, setCredential] = useState({
    email: "test@gmail.com",
    password: "test@123",
  });
  const router = useHistory();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setCredential({ ...credential, [name]: value });
  };

  // simple firebase login
  const firebaseLogin = async (email, password) => {
    alert("login");
  };

  const redirectToSignUpPage = () => {
    router.push("/auth/signUp");
  };

  return (
    <div className="login-page1">
      <div className="container-fluid p-0">
        <div className="row m-0">
          <div className="col-12 p-0">
            <div className="login-contain-main">
              <div className="left-page">
                <div className="login-content">
                  <div className="login-content-header">
                    <a href="/landing">
                      <img
                        className="image-fluid"
                        src="/assets/images/logo/landing-logo.png"
                        alt="images"
                      />
                    </a>
                  </div>
                  <h3>Hello Everyone , We are Chitchat</h3>
                  <h4>Welcome to chitchat please login to your account.</h4>
                  <form className="form1">
                    <div className="form-group">
                      <label className="col-form-label" htmlFor="inputEmail3">
                        Email Address
                      </label>
                      <input
                        className="form-control"
                        id="inputEmail3"
                        defaultValue={credential.email}
                        onChange={(e) => handleChange(e)}
                        name="email"
                        type="email"
                        placeholder="Demo@123gmail.com"
                      />
                    </div>
                    <div className="form-group">
                      <label
                        className="col-form-label"
                        htmlFor="inputPassword3"
                      >
                        Password
                      </label>
                      <span> </span>
                      <input
                        className="form-control"
                        id="inputPassword3"
                        defaultValue={credential.password}
                        onChange={(e) => handleChange(e)}
                        name="password"
                        type="password"
                        placeholder="*******"
                      />
                    </div>
                    <div className="form-group">
                      <div className="rememberchk">
                        <div className="input-text form-check pl-0">
                          <input
                            type="checkbox"
                            id="gridCheck1"
                            aria-label="Checkbox for following text input"
                          />
                          <label
                            className="form-check-label ml-2 mr-auto"
                            htmlFor="gridCheck1"
                          >
                            Remember Me.
                          </label>
                          <h6>Forgot Password?</h6>
                        </div>
                      </div>
                    </div>
                    <div className="form-group">
                      <div className="buttons">
                        <a
                          className="btn btn-primary button-effect"
                          href="#"
                          onClick={() =>
                            firebaseLogin(credential.email, credential.password)
                          }
                        >
                          Login
                        </a>
                        <a
                          className="btn button-effect btn-signup"
                          href="#"
                          onClick={() => redirectToSignUpPage()}
                        >
                          SignUp
                        </a>
                      </div>
                    </div>
                  </form>
                  <div className="line">
                    <h6>OR Connect with</h6>
                  </div>
                  <div className="medialogo">
                    <ul>
                      <li>
                        <a
                          className="icon-btn btn-danger button-effect"
                          href="#"
                        >
                          <i className="fa fa-google"></i>
                        </a>
                      </li>
                      <li>
                        <a
                          className="icon-btn btn-primary button-effect"
                          href="#"
                        >
                          <i className="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li>
                        <a
                          className="icon-btn btn-facebook button-effect"
                          href="#"
                        >
                          <i className="fa fa-facebook-f"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div className="termscondition">
                    <h4 className="mb-0">
                      <span>*</span>Terms and condition<b>&amp;</b>Privacy
                      policy
                    </h4>
                  </div>
                </div>
              </div>
              <div className="right-page">
                <div className="right-login animat-rate">
                  <div className="animation-block">
                    <div className="bg_circle">
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                    </div>
                    <div className="cross"></div>
                    <div className="cross1"></div>
                    <div className="cross2"></div>
                    <div className="dot"></div>
                    <div className="dot1"></div>
                    <div className="maincircle"></div>
                    <div className="top-circle"></div>
                    <div className="center-circle"></div>
                    <div className="bottom-circle"></div>
                    <div className="bottom-circle1"></div>
                    <div className="right-circle"></div>
                    <div className="right-circle1"></div>
                    <img
                      className="heart-logo"
                      src="/assets/images/login_signup/5.png"
                      alt="login logo"
                    />
                    <img
                      className="has-logo"
                      src="/assets/images/login_signup/4.png"
                      alt="login logo"
                    />
                    <img
                      className="login-img"
                      src="/assets/images/login_signup/1.png"
                      alt="login logo"
                    />
                    <img
                      className="boy-logo"
                      src="/assets/images/login_signup/6.png"
                      alt="login boy logo"
                    />
                    <img
                      className="girl-logo"
                      src="/assets/images/login_signup/7.png"
                      alt="girllogo"
                    />
                    <img
                      className="cloud-logo"
                      src="/assets/images/login_signup/2.png"
                      alt="login logo"
                    />
                    <img
                      className="cloud-logo1"
                      src="/assets/images/login_signup/2.png"
                      alt="login logo"
                    />
                    <img
                      className="cloud-logo2"
                      src="/assets/images/login_signup/2.png"
                      alt="login logo"
                    />
                    <img
                      className="cloud-logo3"
                      src="/assets/images/login_signup/2.png"
                      alt="login logo"
                    />
                    <img
                      className="cloud-logo4"
                      src="/assets/images/login_signup/2.png"
                      alt="login logo"
                    />
                    <img
                      className="has-logo1"
                      src="/assets/images/login_signup/4.png"
                      alt="login logo"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;

标签： reactjsreact-router-domreact-context

解决方案

我相信您的上下文提供者应该<Switch> 像这样超出您的范围：

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>
      <CustomizerContextProvider>
        <ChatContextProvider>
          <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/homer" component={Messenger} />
          </Switch>
        </ChatContextProvider>
      </CustomizerContextProvider>
    </Router>
  );
}

export default App;

或者即使您将上下文提供程序保留在您的内部<Switch>，它也应该是这样的：

<Router>
      <Switch>
        <CustomizerContextProvider>
          <ChatContextProvider>
            <Route exact path="/" component={Login} />
            <Route exact path="/homer" component={Messenger} />
          </ChatContextProvider>
        </CustomizerContextProvider>
      </Switch>
    </Router>

看看我做的这个小演示

推荐阅读