react-router-dom

src/__data__/urls.ts

@@ -0,0 +1,17 @@
+import { getNavigationsValue } from '@ijl/cli';
+import { generatePath } from 'react-router-dom';
+
+const baseUrl = getNavigationsValue('r-and-m.main');
+
+export const URLs = {
+  baseUrl,
+  ui: {
+    search: getNavigationsValue('r-and-m.search') && `${baseUrl}${getNavigationsValue('r-and-m.search')}`,
+    charDetail: {
+      url: `${baseUrl}${getNavigationsValue('r-and-m.character.detail')}`,
+      on: Boolean(getNavigationsValue('r-and-m.character.detail')),
+      getUrl: (charId: number) => generatePath(`${baseUrl}${getNavigationsValue('r-and-m.character.detail')}`, { charId })
+    }
+  },
+  api: {},
+}

src/app.tsx

@@ -1,17 +1,16 @@
 import React from "react";
 import { Global } from "@emotion/react";
+import { BrowserRouter } from "react-router-dom";
 
-import { LandingPage } from "./pages/landing";
-import { SearchCharacterPage } from "./pages/search-character";
 import { globalStyles } from "./global-styles";
+import { PageRoutes } from "./routes";
 
 const App = () => {
   return (
-    <>
+    <BrowserRouter>
       <Global styles={globalStyles} />
-      {location.pathname === "/r-and-m" && <LandingPage />}
-      {location.pathname === "/r-and-m/search" && <SearchCharacterPage />}
-    </>
+      <PageRoutes />
+    </BrowserRouter>
   );
 };
 

src/components/link/link.styled.ts

@@ -1,7 +1,9 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import { Link as ConnectedLink } from 'react-router-dom';
 
-export const StyledLink = styled.a<{
+
+export const StyledLink = styled(ConnectedLink)<{
   contrast?: boolean;
   inheritColor?: boolean;
 }>`

src/components/link/link.tsx

@@ -22,7 +22,7 @@ export const Link = (props: LinkProps) => {
   }
 
   return (
-    <StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
+    <StyledLink reloadDocument={isExternal} inheritColor={props.inheritColor} contrast={props.contrast} to={props.href} {...linkProps}>
       {props.children}
       {isExternal && <img src={externalIcon} alt="external link icon" />}
     </StyledLink>

src/components/nav-panel/nav-panel.tsx

@@ -1,30 +1,45 @@
 import React from "react";
+// import { Link as ConnectedLink } from 'react-router-dom'
 
 import { Link } from "../link";
 
 import { Nav, NavList } from "./nav-panel.style";
+import { URLs } from "../../__data__/urls";
 
 const navList = [
-  { title: "Home", href: "#01" },
-  { title: "Персонажи", href: "#02" },
+  { title: "Home", href: "/r-and-m" },
+  { title: "Персонажи", href: "/r-and-m/search" },
   { title: "Локации", href: "#03" },
   { title: "Эризоды", href: "#04" },
 ];
 
+const nav = {
+  home: { title: "Home", href: URLs.baseUrl },
+  search: { title: "Персонажи", href: URLs.ui.search },
+};
+
 export function NavPanel({ currentNavElement }) {
   return (
     <Nav>
       <NavList>
-        {navList.map((element) => (
-          <li key={element.href}>
+        <li>
+          <Link
+            contrast={currentNavElement === nav.home.title}
+            href={nav.home.href}
+          >
+            {nav.home.title}
+          </Link>
+        </li>
+        {URLs.ui.search && (
+          <li>
             <Link
-              contrast={currentNavElement === element.title}
-              href={element.href}
+              contrast={currentNavElement === nav.search.title}
+              href={nav.search.href}
             >
-              {element.title}
+              {nav.search.title}
             </Link>
           </li>
-        ))}
+        )}
       </NavList>
     </Nav>
   );

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>

src/routes.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Routes, Route } from'react-router-dom';
+
+import { URLs } from './__data__/urls';
+import { LandingPage } from './pages/landing';
+import { SearchCharacterPage } from './pages/search-character';
+
+export const PageRoutes = () => (
+  <Routes>
+    <Route path={URLs.ui.charDetail.url} element={<LandingPage />} />
+    <Route path={URLs.baseUrl} element={<LandingPage />} />
+    {URLs.ui.search && <Route path={URLs.ui.search} element={<SearchCharacterPage />} />}
+
+    <Route path="*" element={<h1>Page not found</h1>} />
+  </Routes>
+)