feat: react router v6 & pages integration

package.json

@@ -20,6 +20,7 @@
         "clsx": "^2.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
         "tailwind-merge": "^2.2.1"
     },
     "devDependencies": {

src/App.tsx

@@ -1,20 +1,11 @@
-import derivLogo from './static/deriv-logo.svg';
+import { RouterProvider } from 'react-router-dom';
+
+import { router } from './routes';
 
 import './App.css';
 
 function App() {
-    return (
-        <div className='flex flex-col items-center justify-center gap-10'>
-            <a href='https://deriv.com' target='_blank' rel='noreferrer'>
-                <img src={derivLogo} className='h-[100px] w-[100px]' alt='Deriv logo' />
-            </a>
-            <h1 className='text-5xl font-bold'>Deriv V2</h1>
-            <button>Click me 💅</button>
-            <p>
-                Edit <code>src/App.tsx</code> and save to test HMR
-            </p>
-        </div>
-    );
+    return <RouterProvider router={router} />;
 }
 
 export default App;

src/pages/compareAccounts/compareAccounts.tsx

@@ -0,0 +1,10 @@
+import { Link } from 'react-router-dom';
+
+export const CompareAccounts = () => {
+    return (
+        <>
+            <h1>Compare Accounts</h1>
+            <Link to='/'>Go to Homepage</Link>
+        </>
+    );
+};

src/pages/compareAccounts/index.ts

@@ -0,0 +1 @@
+export { CompareAccounts } from './compareAccounts';

src/pages/homepage/homepage.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+
+import derivLogo from '../../static/deriv-logo.svg';
+
+export function Homepage() {
+    return (
+        <div className='flex flex-col items-center justify-center gap-10'>
+            <a href='https://deriv.com' target='_blank' rel='noreferrer'>
+                <img src={derivLogo} className='h-[100px] w-[100px]' alt='Deriv logo' />
+            </a>
+            <h1 className='text-5xl font-bold'>Deriv V2</h1>
+            <Link to='signup'>Click me 💅</Link>
+            <p>
+                Edit <code>src/App.tsx</code> and save to test HMR
+            </p>
+        </div>
+    );
+}

src/pages/homepage/index.ts

@@ -0,0 +1 @@
+export { Homepage } from './homepage';

src/pages/index.ts

@@ -0,0 +1,3 @@
+export * from './homepage';
+export * from './signup';
+export * from './compareAccounts';

src/pages/signup/index.ts

@@ -0,0 +1 @@
+export { Signup } from './signup';

src/pages/signup/signup.tsx

@@ -0,0 +1,10 @@
+import { Link } from 'react-router-dom';
+
+export const Signup = () => {
+    return (
+        <>
+            <h1>Signup</h1>
+            <Link to='/'>Go to Homepage</Link>
+        </>
+    );
+};

src/routes/index.ts

@@ -0,0 +1 @@
+export { router } from './routes';

src/routes/routes.tsx

@@ -0,0 +1,18 @@
+import { createBrowserRouter } from 'react-router-dom';
+
+import { CompareAccounts, Homepage, Signup } from '../pages';
+
+export const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <Homepage />,
+    },
+    {
+        path: '/signup',
+        element: <Signup />,
+    },
+    {
+        path: '/compare-accounts',
+        element: <CompareAccounts />,
+    },
+]);