Question

不确定发生了什么。我实际上是按照教程逐步进行的。以下是我的文件。但是，由于出现错误，我在'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
);

Answer 1

问题是错误所指示的内容。预计App是默认导出：

import App from "./containers/app";

但是App被命名为export：

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

如果应将其用作默认导出，则应将其导出为：

export default () => (
  ...
)

Answer 2

您要将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

Answer 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;

无法导入const React Redux

3 个答案: