检查`component`的渲染方法 [英] Check the render method of `component`

问题描述

im遵循指南尝试设置react-router-dom高阶组件.我有一个问题在说..

im trying to set up a react-router-dom higher order components following a guide. I have an issue saying..

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

这是我的代码.

App.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

and my 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();

谢谢.

推荐答案

我相信您正在混淆React Router的 Route 属性值.要将组件分配给 Route ，有几种不同的方法.一种是使用 component ，另一种是使用 render .

I believe you're mixing up your react router Route prop values. To assign a component to a Route there's a few different ways. One is with component, another is with render.

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

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

您使用的是 render 语法，但使用的是 component 道具.要么将 component 更改为 render ，要么更改()=>< LandingPage/> 到 LandingPage (与c的其他路线相同).

You're using the render syntax but the component prop. Either change component to render, or change () => <LandingPage /> to LandingPage (and the same for the other routes ofc).

这篇关于检查`component`的渲染方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！