Cannot import const React Redux - reactjs

Question

Not sure what is going on. I am literally following a tutorial step-by-step. Below are my files. However I have added 'export' before 'const App' since I was getting errors: 'App' is declared but its value is never read. And the export seems to cause the warning to go away. But upon running the code, regardless if the export is there or not I receive the same message when I 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

You're exporting your App component as a named export, but trying to import it as a default import. if you add brackets to the App in your import statement, as I've demonstrated below, it should all work.
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
);
Alternatively, if you want to use a default export (which I think is what you were originally trying to do), you need to add a default export to the end of your 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

The problem is what the error says. It's expected that App is default export:
import App from "./containers/app";
But App is named export:
export const App = () => (
...
)
If it's supposed to be used as default export, it should be exported as:
export default () => (
...
)

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;