Невозможно импортировать const React Redux

Question

Не уверен, что происходит. Я буквально следую инструкциям шаг за шагом. Ниже мои файлы. Однако я добавил «экспорт» перед «const App», так как получал ошибки: '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 / контейнеры / приложение / 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

Вы экспортируете свой компонент приложения как именованный экспорт, но пытаетесь импортировать его как импорт по умолчанию.если вы добавите скобки к приложению в своем операторе импорта, как я продемонстрировал ниже, все это должно работать.

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 2

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;

Answer 3

Проблема в том, что говорит ошибка. Ожидается, что App - экспорт по умолчанию:

import App from "./containers/app";

Но App называется экспорт:

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

Если предполагается использовать его как экспорт по умолчанию, его следует экспортировать как:

export default () => (
  ...
)