我正在尝试按照指南设置一个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();
Thanks.
我相信你正在混淆你的反应路由器Route
道具值。将组件分配给Route
有几种不同的方法。一个是与component
,另一个是与render
.
<Route ... component={LandingPage} />
<Route ... render={() => <LandingPage />} />
您正在使用render
语法但是component
支柱。要么改变component
to render
,或改变() => <LandingPage />
to LandingPage
(对于其他路线 ofc 也是如此)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)