切換到登錄回傳元素型別在React中無效

我正在努力將我的登錄和注冊頁面連接到我在 React 中的主頁。

這是我專案的一般結構

--src
  --assets
  --components
    --elements
    --layout
    --login_components
      Login.js
    --signup_components
      Signup.js
  --layouts
  --utils
  --views
App.js
index.js

這就是我在 App.js 中的內容

import React, { useRef, useEffect } from 'react';
import { useLocation, Switch } from 'react-router-dom';
import AppRoute from './utils/AppRoute';
import ScrollReveal from './utils/ScrollReveal';
import Login from './components/login_components/Login';
import Signup from './components/signup_components/Signup'

// Layouts
import LayoutDefault from './layouts/LayoutDefault';

// Views 
import Home from './views/Home';

// Initialize Google Analytics
ReactGA.initialize(process.env.REACT_APP_GA_CODE);

const trackPage = page => {
  ReactGA.set({ page });
  ReactGA.pageview(page);
};

const App = () => {

  const childRef = useRef();
  let location = useLocation();

  useEffect(() => {
    const page = location.pathname;
    document.body.classList.add('is-loaded')
    childRef.current.init();
    trackPage(page);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location]);

  return (
    <ScrollReveal
      ref={childRef}
      children={() => (
        <Switch>
          <AppRoute exact path="/" component={Home} layout={LayoutDefault} />
          <AppRoute exact path="/login" /> component={Login} />
          <AppRoute exact path="/signup" /> component={Signup} />
        </Switch>
      )} />
  );
}

export default App;

我的登錄.js：

import React, { Component } from "react";

export default class Login extends Component {
    render() {
        return (
            <div>
                <h3>Login</h3>
            </div>
        );
    }
}

和 Signup.js：

import React, { Component } from "react";

export default class Signup extends Component {
    render() {
        return (
            <div>
                <h3>Sign Up</h3>
            </div>
        );
    }
}

當我嘗試訪問 /login 時出現錯誤

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Context.Consumer`.

在我的控制臺上

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

uj5u.com熱心網友回復：

你這里有問題：

<AppRoute exact path="/login" /> component={Login} />
<AppRoute exact path="/signup" /> component={Signup} />

您在組件之前關閉 AppRoute。它應該是：

<AppRoute exact path="/login" component={Login} />
<AppRoute exact path="/signup" component={Signup} />

您使用的是 Visual Studio 或 WebStorm 之類的 IDE 嗎？如果是這樣，它應該抱怨它。如果沒有，那么是時候查看一個了，因為它有助于防止將來出現此類錯誤！

標籤：javascript 反应

上一篇：如何在useEffect中立即獲取更新狀態的值

下一篇：使用react.js連接到API后無法加載影像