Componente de error 404 criado

src/components/PageDefault/index.js

@@ -12,11 +12,11 @@ const Main = styled.main`
     padding-right: 5%;
 `
 
-export default ({ children }) => {
+export default ({ children, className }) => {
     return (
         <>
             <Menu />
-            <Main>
+            <Main className={className}>
                 {children}
             </Main>
             <Footer />

src/index.css

@@ -28,4 +28,13 @@ a {
   min-height: calc(100vh - var(--bodyPaddingTop));
   display: flex;
   flex-direction: column;
+}
+
+.error404 {
+  text-align: center;
+  padding: 50px;
+}
+
+.error404 h3 {
+  text-transform: uppercase;
 }

src/index.js

@@ -5,14 +5,15 @@ import './index.css';
 import Home from './pages/Home';
 import CadastroVideo from './pages/cadastro/Video'
 import CadastroCategoria from './pages/cadastro/Categoria'
+import PaginaErro404 from './pages/PaginaErro404'
 
 ReactDOM.render(
   <BrowserRouter>
     <Switch>
       <Route path="/" component={Home} exact />
       <Route path="/cadastro/video" component={CadastroVideo} />
       <Route path="/cadastro/categoria" component={CadastroCategoria} />
-      <Route component={() => 'Página 404'} />
+      <Route component={PaginaErro404} />
     </Switch>
   </BrowserRouter>,
   document.getElementById('root')

src/pages/PaginaErro404/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import PageDefault from '../../components/PageDefault'
+
+export default () => {
+    return (
+        <PageDefault className="error404">
+            <h1>404</h1>
+            <h3>Página não encontrada</h3>
+        </PageDefault>
+    )
+}