-1

我是一名设计师，正在尝试学习一些编码，以便我可以在空闲时间从事自己的项目。我克隆了这个 [electron-react-boilerplate][1] 以开始使用，并从导航 UI 开始，只是为了让球滚动。

错误

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 your code at TasksPage.tsx:5.
    in TasksPage (at Routes.tsx:27)
    in Suspense (at Routes.tsx:26)
    in TasksPage (created by Context.Consumer)
    in Route (at Routes.tsx:35)
    in Switch (at Routes.tsx:34)
    in App (at Routes.tsx:33)
    in Routes (at Root.tsx:17)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (at Root.tsx:16)
    in Provider (at Root.tsx:15)
    in Root (created by HotExportedRoot)
    in AppContainer (created by HotExportedRoot)
    in HotExportedRoot
    in AppContainer (at app/index.tsx:15)

在 TasksPage.tsx 上，第 5 行是<Tasks />，它指向 Tasks.tsx 文件（如下所示）。

Tasks.tsx （导出）

import React from 'react';
import { Link } from 'react-router-dom';
import routes from '../../constants/routes.json';

export default function Tasks(): JSX.Element {
  return(
    <div>
      <div> <h2>Test</h2></div>
    </div>
  );
}

TasksPage.tsx（导入）

import React from 'react';
import Tasks  from '../features/tasks/Tasks';

export default function TasksPage() {
  return <Tasks />;
}

路线.tsx

/* eslint react/jsx-props-no-spreading: off */
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import routes from './constants/routes.json';
import App from './containers/App';
import HomePage from './containers/HomePage';

// Lazily load routes and code split with webpack
const LazyCounterPage = React.lazy(() =>
  import(/* webpackChunkName: "CounterPage" */ './containers/CounterPage')
);

const CounterPage = (props: Record<string, any>) => (
  <React.Suspense fallback={<h1>Loading...</h1>}>
    <LazyCounterPage {...props} />
  </React.Suspense>
);


// Lazily load routes and code split with webpack
const LazyTasksPage = React.lazy(() =>
  import(/* webpackChunkName: "TasksPage" */ './containers/TasksPage')
);

const TasksPage = (props: Record<string, any>) => (
  <React.Suspense fallback={<h1>Loading...</h1>}>
    <LazyTasksPage {...props} />
  </React.Suspense>
);

export default function Routes() {
  return (
    <App>
      <Switch>
        <Route path={routes.TASKS} component={TasksPage} />
        <Route path={routes.COUNTER} component={CounterPage} />
        <Route path={routes.HOME} component={HomePage} />
      </Switch>
    </App>
  );
}

路线.json

{
  "HOME": "/",
  "COUNTER": "/counter",
  "TASKS": "/tasks"
}

额外页面供参考

主页.tsx

import React from 'react';
import Home from '../components/Home';


export default function HomePage() {
  return <Home />;
}

CounterPage.tsx

import React from 'react';
import Counter from '../features/counter/Counter';

export default function CounterPage() {
  return <Counter />;
}
4

1 回答 1

0

它可以链接到：https ://stackoverflow.com/a/48272291/9201061

由于您使用的是 .ts 和 .tsx，因此您需要使用 resolve.extensions 告诉它也在您的 Webpack 配置中查找它们：

编辑: : 也许你应该: JSX.Element在 TasksPage() 之后添加

于 2020-11-13T02:09:09.157 回答