ReactJS:检查"MainRouter"的渲染方法.错误

Question

我正在尝试从一个组件文件中导出两个命名模块，并以某种方式不断得到"检查渲染方法..."错误。

下面看看我的代码。

应用.jsx

import React from 'react';
import { MainRouter } from '../Router';
const App = () => (
<div className="card">
<MainRouter />
</div>
);
export default App;

Router.jsx - 这是上面导入的内容

import React, { Fragment } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PrivateRoute from './components/PrivateRoute';
import Header from './components/Header';
import AdminNav from './components/AdminNav';
import Calendar from './pages/Calendar';
import Search from './pages/Search';
import AdminLogin from './pages/AdminLogin';
import Admin from './pages/Admin';
import New from './pages/Admin/New';
import Users from './pages/Admin/Users';
let styles = {};
styles.body__wrapper = {
padding: '2%'
};
export const MainRouter = () => (
<Router>
<Fragment>
<div className="nav__wrapper">
<Header />
</div>
<div style={styles.body__wrapper}>
<Switch>
<Route exact path="/" component={Calendar} />
<Route path="/search/:name" component={Search} />
<Route path="/admin/signin" component={AdminLogin} />
<PrivateRoute path="/admin" component={Admin} />
</Switch>sasd
</div>
</Fragment>
</Router>
);
export const AdminRouter = (props) => (
<div className="container">
<Router>
<Fragment>
<AdminNav {...props}/>
<div className="my-3">
<Switch>
<Route path="/users" component={Users} />
<Route path="/new" component={New} />
</Switch>
</div>
</Fragment>
</Router>
</div>
);

我尝试过导出{主路由器，管理员路由器}，但似乎效果不佳。

完整的错误消息：

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 `MainRouter`.

Answer 1

我实际上想通了。

我在每个路由组件上使用多个索引.js，并在几乎所有路由组件上错误地配置了导出，导致整个应用程序崩溃。