检查`component`的render方法

IT技术 reactjs firebase firebase-authentication react-router-dom
2021-05-26 12:54:04

我试图按照指南设置一个 react-router-dom 高阶组件。我有个问题说..

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:对象。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。检查 的渲染方法component

这是我的代码。

应用程序.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';

import Navigation from './Navigation';
import LandingPage from './Landing';
import SignUpPage from './SignUp';
import SignInPage from './SignIn';
import PasswordForgetPage from './PasswordForget';
import HomePage from './Home';
import AccountPage from './Account';

import * as routes from '../constants/routes';

const App = () =>
  <Router>
    <div>
      <Navigation />

      <hr/>

      <Route exact path={routes.LANDING} component={() => <LandingPage />} />
      <Route exact path={routes.SIGN_UP} component={() => <SignUpPage />} />
      <Route exact path={routes.SIGN_IN} component={() => <SignInPage />} />
      <Route exact path={routes.PASSWORD_FORGET} component={() => <PasswordForgetPage />} />
      <Route exact path={routes.HOME} component={() => <HomePage />} />
      <Route exact path={routes.ACCOUNT} component={() => <AccountPage />} />
    </div>
  </Router>

export default App;

和我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import { unregister } from './registerServiceWorker';

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

谢谢。

1个回答

我相信您正在混淆您的react-routerRouteprops值。要将组件分配给 aRoute有几种不同的方法。一个是与component,另一个是与render

<Route ... component={LandingPage} />

<Route ... render={() => <LandingPage />} />

您正在使用render语法但componentprops。要么更改componentrender,要么更改() => <LandingPage />LandingPage(对于其他路由 ofc 也是如此)。