react-router-dom

ijl.config.js

@@ -1,22 +1,24 @@
-const pkg = require('./package')
+const pkg = require("./package");
 
 module.exports = {
-  apiPath: 'stubs/api',
+  apiPath: "stubs/api",
   webpackConfig: {
     output: {
-      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
-    }
+    },
   },
   /* use https://kc.admin.inno-js.ru/ to create config, navigations and features */
   navigations: {
-    'r-and-m.main': '/r-and-m'
+    "r-and-m.main": "/r-and-m",
+    "r-and-m.search": "/search",
+    "r-and-m.character.detail": "/char/:charId"
   },
   features: {
-    'r-and-m': {
+    "r-and-m": {
       // add your features here in the format [featureName]: { value: string }
     },
   },
   config: {
-    key: 'value'
+    key: "value",
-  }
+  },
-}
+};

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "r-and-m",
-    "version": "1.0.0",
+    "version": "0.0.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "r-and-m",
-            "version": "1.0.0",
+            "version": "0.0.0",
             "license": "ISC",
             "dependencies": {
                 "@emotion/react": "^11.11.4",
@@ -17,6 +17,7 @@
                 "express": "^4.19.2",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
+                "react-router-dom": "^6.23.0",
                 "typescript": "^5.4.4"
             }
         },
@@ -2222,6 +2223,14 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@remix-run/router": {
+            "version": "1.16.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+            "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/@socket.io/component-emitter": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@@ -6549,6 +6558,36 @@
             "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
         },
+        "node_modules/react-router": {
+            "version": "6.23.0",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+            "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+            "dependencies": {
+                "@remix-run/router": "1.16.0"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8"
+            }
+        },
+        "node_modules/react-router-dom": {
+            "version": "6.23.0",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+            "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+            "dependencies": {
+                "@remix-run/router": "1.16.0",
+                "react-router": "6.23.0"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
         "node_modules/rechoir": {
             "version": "0.8.0",
             "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",

package.json

@@ -25,6 +25,7 @@
         "express": "^4.19.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.23.0",
         "typescript": "^5.4.4"
     }
 }

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 />}
+      <PageRoutes />
-      {location.pathname === "/r-and-m/search" && <SearchCharacterPage />}
+    </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: "Home", href: "/r-and-m" },
-  { title: "Персонажи", href: "#02" },
+  { 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>
-          <li key={element.href}>
           <Link
-              contrast={currentNavElement === element.title}
+            contrast={currentNavElement === nav.home.title}
-              href={element.href}
+            href={nav.home.href}
           >
-              {element.title}
+            {nav.home.title}
           </Link>
         </li>
-        ))}
+        {URLs.ui.search && (
+          <li>
+            <Link
+              contrast={currentNavElement === nav.search.title}
+              href={nav.search.href}
+            >
+              {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) => (
+            <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>
+)