react-router-dom

src/pages/landing.tsx

@@ -9,6 +9,7 @@ import logo4x from "../assets/logo_4x.png";
 import { Link } from "../components/link";
 import { Card } from "../components/card";
 import { Header1 } from "../components/common";
+
 import {
   BrandText,
   Logo,

src/pages/search-character.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link as Connectedlink } from "react-router-dom";
 
 import data from "../__stubs__/characters.json";
 import logo from "../assets/logo_1x.png";
@@ -20,6 +21,7 @@ import {
 } from "./style";
 import { Header1 } from "../components/common";
 import { InputField } from "../components/field/field";
+import { URLs } from "../__data__/urls";
 
 export const SearchCharacterPage = () => {
   return (
@@ -55,10 +57,12 @@ export const SearchCharacterPage = () => {
         </MainCardWrapper>
         <CharacterList>
           {data?.map((char) => (
-            <CharacterItem key={char.id}>
-              <img src={char.image} />
-              <CharName>{char.name}</CharName>
-            </CharacterItem>
+            <Connectedlink to={URLs.ui.charDetail.getUrl(char.id)}>
+              <CharacterItem key={char.id}>
+                <img src={char.image} />
+                <CharName>{char.name}</CharName>
+              </CharacterItem>
+            </Connectedlink>
           ))}
         </CharacterList>
       </Main>