chore: added properties from react-router link component

Author: Micaela Torres

src/common/app-link/app-link.tsx

@@ -13,29 +13,35 @@ import type { Params, RouteName } from "../../routes/routes";
   defined in this project. To link outside, use <a></a> tags as usual.
 */
 
+type Route = {
+  pathParams?: Params;
+  queryParams?: Params;
+  routeName: RouteName;
+};
+
 // Extract pathParams from the routeName
-type AppLinkProps<R extends RouteName> = {
+type AppLinkProps = {
   children: React.ReactNode;
   className?: string;
-  pathParams?: Params;
-  queryParams?: Params;
-  routeName: R;
+  route: Route;
   targetBlank?: boolean;
+  replace?: boolean;
+  preventScrollReset?: boolean;
+  state?: any;
+  reloadDocument?: boolean;
 };
 
 const defaultProps = {
   className: "",
-  pathParams: {},
-  queryParams: {},
   targetBlank: false,
+  replace: false,
+  preventScrollReset: false,
+  reloadDocument: false,
 };
 
-const AppLink = <R extends RouteName>(props: AppLinkProps<R>) => {
-  const routePath = getRouteFor(
-    props.routeName,
-    props.pathParams,
-    props.queryParams,
-  );
+const AppLink = (props: AppLinkProps) => {
+  const { routeName, pathParams, queryParams } = props.route;
+  const routePath = getRouteFor(routeName, pathParams, queryParams);
   let targetBlankProps = {};
   if (props.targetBlank) {
     targetBlankProps = {
@@ -44,7 +50,15 @@ const AppLink = <R extends RouteName>(props: AppLinkProps<R>) => {
     };
   }
   return (
-    <Link className={props.className} to={routePath} {...targetBlankProps}>
+    <Link
+      className={props.className}
+      to={routePath}
+      replace={props.replace}
+      preventScrollReset={props.preventScrollReset}
+      state={props.state}
+      reloadDocument={props.reloadDocument}
+      {...targetBlankProps}
+    >
       {props.children}
     </Link>
   );

src/common/app-redirect/app-redirect.tsx

@@ -13,26 +13,24 @@ import type { Params, RouteName } from "../../routes/routes";
   defined in this project. To link outside, use <a></a> tags as usual.
 */
 
-type AppRedirectProps<R extends RouteName> = {
+type Route = {
   pathParams?: Params;
   queryParams?: Params;
-  routeName: R;
+  routeName: RouteName;
 };
 
-const defaultProps = {
-  pathParams: {},
-  queryParams: {},
+type AppRedirectProps = {
+  route: Route;
 };
 
-const AppRedirect = <R extends RouteName>(props: AppRedirectProps<R>) => {
+const AppRedirect = (props: AppRedirectProps) => {
+  const { routeName, pathParams, queryParams } = props.route;
   const goToPage = useGoToPage();
   useEffect(() => {
-    goToPage(props.routeName, props.pathParams, props.queryParams);
+    goToPage(routeName, pathParams, queryParams);
   }, []);
 
   return null;
 };
 
-AppRedirect.defaultProps = defaultProps;
-
 export { AppRedirect };

src/common/navbar/navbar.tsx

@@ -10,11 +10,16 @@ export const Navbar = () => (
     <Container>
       <div className={styles.internalContainer}>
         <div>
-          <AppLink routeName={RouteName.Home}>Logo goes here</AppLink>
+          <AppLink route={{ routeName: RouteName.Home }}>
+            Logo goes here
+          </AppLink>
         </div>
         <div className={styles.rightContainer}>
           <nav>
-            <AppLink className={globalStyles.link} routeName={RouteName.About}>
+            <AppLink
+              className={globalStyles.link}
+              route={{ routeName: RouteName.About }}
+            >
               About
             </AppLink>
           </nav>