feat: add react-router and i18n

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "i18next": "^23.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.3.0",
     "react-router-dom": "^6.16.0",
     "styled-components": "^6.1.0"
   },

src/App.tsx

@@ -1,11 +1,22 @@
-import { AppStyled, HelloWorldStyled } from './AppStyles';
+import { Link, Route, Routes } from 'react-router-dom';
+import { HashRouterStyled, HelloWorldStyled, LinkSegment } from './AppStyles';
+import { Home, SignIn, SignUp } from './pages';
 
 function App() {
   return (
-    <AppStyled>
+    <HashRouterStyled>
       <HelloWorldStyled>Hello World</HelloWorldStyled>
-      <HelloWorldStyled>Hello World</HelloWorldStyled>
-    </AppStyled>
+      <LinkSegment>
+        <Link to={'/'}>Home</Link>
+        <Link to={'signin'}>SignIn</Link>
+        <Link to={'signup'}>SignUp</Link>
+      </LinkSegment>
+      <Routes>
+        <Route index path="/" element={<Home />} />
+        <Route path="signin" element={<SignIn />} />
+        <Route path="signup" element={<SignUp />} />
+      </Routes>
+    </HashRouterStyled>
   );
 }
 

src/AppStyles.ts

@@ -1,6 +1,7 @@
+import { HashRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const AppStyled = styled.div`
+export const HashRouterStyled = styled(HashRouter)`
   width: 100%;
   height: 100%;
   display: flex;
@@ -9,6 +10,11 @@ export const AppStyled = styled.div`
   flex-direction: column;
 `;
 
+export const LinkSegment = styled.div`
+  display: flex;
+  gap: 1rem;
+`;
+
 export const HelloWorldStyled = styled.p`
   font-size: 2rem;
 `;

src/pages/Home.tsx

@@ -0,0 +1,9 @@
+function Home() {
+  return (
+    <div>
+      <p>Home</p>
+    </div>
+  );
+}
+
+export default Home;

src/pages/SignIn.tsx

@@ -0,0 +1,9 @@
+function SignIn() {
+  return (
+    <div>
+      <p>Sign In</p>
+    </div>
+  );
+}
+
+export default SignIn;

src/pages/SignUp.tsx

@@ -0,0 +1,9 @@
+function SignUp() {
+  return (
+    <div>
+      <p>Sign Up</p>
+    </div>
+  );
+}
+
+export default SignUp;

src/pages/index.ts

@@ -0,0 +1,3 @@
+export { default as SignIn } from './SignIn';
+export { default as SignUp } from './SignUp';
+export { default as Home } from './Home';