reason behind the default keyword for ES6

Question

I am following along in a React tutorial right now that currently uses ES6. I am new to the ES6 and I have been seeing the default keyword used quite often when it comes to exporting names from modules. I have been trying to comprehend what the reasoning behind the default word is, but have not found an answer I can comprehend yet.

Here is an example:

const Header = () => {
  return (
    <nav>
      <IndexLink to="/" activeClassName="active">Home</IndexLink>
      {" | "}
      <Link to="/about" activeClassName="active">About</Link>
      {" | "}
      <Link to ="/course" activeClassName="active">Courses</Link>
    </nav>
  );
};

export default Header;

Thank you in advance and let me know if I am not clear on anything.

Answer 1

Because you can export many variables from the same file , default is used only once in the whole file to let you import this default variable outside without using brackets {}:

export default Header;

let you to import it :

import Header from './Header.jsx';

---

export {Header};

let you to import it :

import {Header} from './Header.jsx';