Q:

How to route a React-Redux app?

I have started to create a simple React-Redux app following a tutorial. But since then router system of React has changed and I cant figure how to use routes correctly.
My index.js file consists of:
import App from "./containers/App"

render(

    <Provider store={store}>
          <App />
    </Provider>
 ,
    window.document.getElementById('app'));

And then in containers/App.js
    ...
    import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
    import {Header} from '../components/Header';
    ...

    class App extends React.Component {

      render() {
        return (
          <Router>
          <div className="container">
            <Header/>
            <Main changeUsername={() => this.props.setName("Anna")}/>

            <User username={this.props.user.name}/>

          </div>
        </Router>
        );
      }
    }
const mapStateToProps = (state) => {
  return {
    user: state.user,
    math: state.math
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    setName: (name) => {
      dispatch(setName(name));
    },

  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App)

and problem comes from components/Header.js
import { Link} from 'react-router-dom'
const Header = (props) => {
    return (

        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="nav-link" to="/">Spider</Link>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item" activeClassName={"active"}>
                <Link className="nav-link"  to="/home">Home</Link>
              </li>
              <li className="nav-item"  activeClassName={"active"}>
                <Link className="nav-link" to="{user/${user.id}}">User</Link>
              </li>

            </ul>

          </div>
        </nav>

    );
}

export default Header

The console shows the error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 the render method of `App`.
    in App (created by Connect(App))
    in Connect(App)
    in Provider

How can I fix it ? Thanks

A:

The problem is in the way you are importing Header component. You exported it as a default and but you are importing it a named import here
import {Header} from '../components/Header';

Change the import to 
import Header from '../components/Header';

or change the export in Header component to
export { Header }

Apart from this, you need to fix other small issues as well
First: 
 <Link className="nav-link" to="{user/${user.id}}">User</Link>

should be 
<Link className="nav-link" to=`{user/${user.id}}`>User</Link>

Second:
You need to use withRouter with Header since its not connected to Route directly
You could do that like
import {withRouter} from 'react-router'
const withHeader = withRouter(Header)
export {withHeader as Header}

or 
import {withRouter} from 'react-router'
export default withRouter(Header)

depending on how you import it

