无法导入 const React Redux答案

【问题标题】：Cannot import const React Redux无法导入 const React Redux
【发布时间】：2019-03-10 20:25:00
【问题描述】：

不知道发生了什么。我实际上是按照教程一步一步来的。以下是我的文件。但是，由于出现错误，我在 'const App' 之前添加了 'export'：'App' is declared but its value is never read. 而export 似乎导致警告消失。但是在运行代码时，无论export 是否存在，我在yarn start 时都会收到相同的消息：

 '/src/index.js
Attempted import error: './containers/app' does not contain a default export (imported as 'App').'

src/containers/app/index.js：

import React from 'react';
import { Route, Link } from 'react-router-dom'
import Home from '../home'
import About from '../about'

export const App = () => (
  <div>
    <header>
      <Link to="/">Home</Link>
      <Link to="/about-us">About</Link>
    </header>

    <main>
      <Route exact path="/" component={Home} />
      <Route exact path="/about-us" component={About} />
    </main>
  </div>
)

index.js：

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { ConnectedRouter } from "connected-react-router";
import store, { history } from "./store";
import App from "./containers/app";

import "./index.css";

const target = document.querySelector("#root");

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <App />
      </div>
    </ConnectedRouter>
  </Provider>,
  target
);

【问题讨论】：

标签： reactjs redux react-router components

【解决方案1】：

您将 App 组件导出为命名导出，但尝试将其导入为默认导入。如果您在 import 语句中为 App 添加括号，如下所示，它应该可以正常工作。

index.js

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { ConnectedRouter } from "connected-react-router";
import store, { history } from "./store";
-> add brackets here import { App } from "./containers/app"; <--

import "./index.css";

const target = document.querySelector("#root");

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <App />
      </div>
    </ConnectedRouter>
  </Provider>,
  target
);

或者，如果您想使用默认导出（我认为这是您最初尝试做的），您需要在 App.js 的末尾添加一个默认导出。

import React from 'react';
import { Route, Link } from 'react-router-dom'
import Home from '../home' 
import About from '../about'

 const App = () => (
  <div>
    <header>
      <Link to="/">Home</Link>
      <Link to="/about-us">About</Link>
    </header>

    <main>
      <Route exact path="/" component={Home} />
      <Route exact path="/about-us" component={About} />
    </main>
  </div>
)

export default App

【讨论】：

上述建议均无效。正如我所提到的，添加“导出”是为了满足一些警告说（const App: () => JSX.Element)）。 Muskett，我对您的回答抱有希望，并在“const App”之前尝试了有无“导出”
@SC4RECROW - 我已经用另一个可能的解决方案更新了我的答案，如果这对你有用，请告诉我。

【解决方案2】：

问题是错误所说的。预计App 是默认导出：

import App from "./containers/app";

但是App被命名为export：

export const App = () => (
  ...
)

如果它应该被用作默认导出，它应该被导出为：

export default () => (
  ...
)

【讨论】：

我知道，我添加了导入以满足警告（const App: () => JSX.Element）。即使省略了“导出”，它似乎也不想工作。您的默认建议也没有帮助

【解决方案3】：

class App extends Component {
  render() {
    return (
     <div>
        <header>
          <Link to="/">Home</Link>
          <Link to="/about-us">About</Link>
        </header>

        <main>
          <Route exact path="/" component={Home} />
          <Route exact path="/about-us" component={About} />
        </main>
     </div>
   )

export default App;

【讨论】：