检查 `component` 的渲染方法
Posted
技术标签:
【中文标题】检查 `component` 的渲染方法【英文标题】:Check the render method of `component` 【发布时间】:2019-01-17 14:15:03 【问题描述】:我正在尝试按照指南设置 react-router-dom 高阶组件。我有一个问题要说..
元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:对象。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。 检查
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
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】:我相信您混淆了您的反应路由器 Route
属性值。要将组件分配给Route
,有几种不同的方法。一个是component
,另一个是render
。
<Route ... component=LandingPage />
<Route ... render=() => <LandingPage /> />
您使用的是 render
语法,但使用的是 component
属性。要么将component
更改为render
,要么将() => <LandingPage />
更改为LandingPage
(其他路由也一样)。
【讨论】:
我改成组件语法,现在得到检查Route
的渲染方法。渲染语法也会出现同样的错误以上是关于检查 `component` 的渲染方法的主要内容,如果未能解决你的问题,请参考以下文章