NotFound page

src/components/App.jsx

@@ -11,6 +11,7 @@ import { useEffect } from "react";
 import { currentUserThunk } from "../redux/auth/operations";
 import { selectIsRefresh } from "../redux/auth/selectors";
 import PrivateRoute from "routes/PrivateRoute";
+import NotFoundPage from "pages/NotFoundPage";
 
 export const App = () => {
   const dispatch = useDispatch();
@@ -55,6 +56,7 @@ export const App = () => {
               }
             />
           </Route>
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       )}
     </>

src/components/NotFound/NotFound.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Container, NavLinkStyled, Wrapper } from "./NotFound.styled";
+
+const NotFound = () => {
+  return (
+    <>
+      <Container>
+        <Wrapper>
+          <h3>Page Not Found</h3>
+          <p>
+            You can go to <NavLinkStyled to="/login">login</NavLinkStyled>
+          </p>
+        </Wrapper>
+      </Container>
+    </>
+  );
+};
+
+export default NotFound;

src/components/NotFound/NotFound.styled.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+
+export const Container = styled.div`
+  height: 100vh;
+  background: ${({ theme }) => theme.colors.green};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  justify-content: center;
+
+  & h3 {
+    color: ${({ theme }) => theme.colors.white};
+    font-size: 22px;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & p {
+    font-size: 18px;
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;
+
+export const NavLinkStyled = styled(NavLink)`
+  background: ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.green};
+  padding: 5px 20px;
+  border-radius: 15px;
+  font-size: 18px;
+  font-weight: 600;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.black};
+  }
+`;

src/pages/NotFoundPage.jsx

@@ -0,0 +1,12 @@
+import NotFound from "components/NotFound/NotFound";
+import React from "react";
+
+const NotFoundPage = () => {
+  return (
+    <>
+      <NotFound />
+    </>
+  );
+};
+
+export default NotFoundPage;