¿Por qué el componente es6 react funciona solo con "exportación predeterminada"?

Este componente funciona:

export class Template extends React.Component {
    render() {
        return (
            <div> component </div>
        );
    }
};
export default Template;

Si elimino la última fila, no funciona.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Supongo que no entiendo algo en la sintaxis es6. ¿No es necesario exportar sin signo "predeterminado"?

Exportar sin defaultmedios es una "exportación con nombre". Puede tener múltiples exportaciones con nombre en un solo archivo. Entonces si haces esto,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

entonces debe importar estas exportaciones utilizando sus nombres exactos. Entonces, para usar estos componentes en otro archivo que tendría que hacer,

import {Template, AnotherTemplate} from './components/templates'

Alternativamente, si exporta como la defaultexportación de esta manera,

export default class Template {}

Luego, en otro archivo, importa la exportación predeterminada sin utilizar {}, como este,

import Template from './components/templates'

Solo puede haber una exportación predeterminada por archivo. En React es una convención exportar un componente de un archivo, y exportarlo es la exportación predeterminada.

Puede cambiar el nombre de la exportación predeterminada a medida que la importa,

import TheTemplate from './components/templates'

Y puede importar exportaciones predeterminadas y con nombre al mismo tiempo,

import Template,{AnotherTemplate} from './components/templates'

Agregue {} al importar y exportar: export { ... };| import { ... } from './Template';

exportar →import { ... } from './Template'

exportación predeterminada →import ... from './Template'

Aquí hay un ejemplo de trabajo:

// ExportExample.js
import React from "react";

function DefaultExport() {
  return "This is the default export";
}

function Export1() {
  return "Export without default 1";
}

function Export2() {
  return "Export without default 2";
}

export default DefaultExport;
export { Export1, Export2 };

// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";

export default function App() {
  return (
    <>
      <strong>
        <DefaultExport />
      </strong>
      <br />
      <Export1 />
      <br />
      <Export2 />
    </>
  );
}

⚡️ Sandbox de trabajo para jugar: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark