{
+ const interval = setInterval(() => {
+ setSecondsLeft(seconds => seconds - 1);
+ }, 1000);
+
+ const timeout = setTimeout(() => {
+ window.location.replace('/goit-react-hw-08-phonebook');
+ }, 5000);
+
+ return () => {
+ clearInterval(interval);
+ clearTimeout(timeout);
+ };
+ }, []);
+
+ return (
+
+
Redirecting...
+
+ You will be redirected to the home page in {secondsLeft} seconds.
+
+
+ );
+}
+
+function NotFoundPage() {
+ return (
+
+ 404 Not Found
+
+ Sorry, the page you are looking for could not be found.
+
+
+
+ );
+}
+
+export default NotFoundPage;
diff --git a/src/components/NotFoundPage/NotFoundPage.styled.js b/src/components/NotFoundPage/NotFoundPage.styled.js
new file mode 100644
index 0000000..94f3e1a
--- /dev/null
+++ b/src/components/NotFoundPage/NotFoundPage.styled.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const Center = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+`;
+
+export const Title = styled.h1`
+ font-size: 30px;
+ font-weight: 700;
+`;
+export const Description = styled.p`
+ font-size: 20px;
+ font-weight: 500;
+`;
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
index 72e1336..f8604d3 100644
--- a/src/components/PrivateRoute.js
+++ b/src/components/PrivateRoute.js
@@ -6,7 +6,10 @@ import { useAuth } from 'hooks';
* - Otherwise render to redirectTo
*/
-export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => {
+export const PrivateRoute = ({
+ component: Component,
+ redirectTo = '/goit-react-hw-08-phonebook',
+}) => {
const { isLoggedIn, isRefreshing } = useAuth();
const shouldRedirect = !isLoggedIn && !isRefreshing;
diff --git a/src/components/RestrictedRoute.js b/src/components/RestrictedRoute.js
index bdf82dc..0f71b9b 100644
--- a/src/components/RestrictedRoute.js
+++ b/src/components/RestrictedRoute.js
@@ -6,7 +6,10 @@ import { Navigate } from 'react-router-dom';
* - Otherwise render the component
*/
-export const RestrictedRoute = ({ component: Component, redirectTo = '/' }) => {
+export const RestrictedRoute = ({
+ component: Component,
+ redirectTo = '/goit-react-hw-08-phonebook',
+}) => {
const { isLoggedIn } = useAuth();
return isLoggedIn ? : Component;