feat!: change in routing format

package.json

@@ -18,6 +18,7 @@
 		"react-dom": "18.2.0",
 		"react-icons": "4.4.0",
 		"react-redux": "8.0.4",
+		"react-router": "^6.4.2",
 		"react-router-dom": "6.4.2",
 		"react-scripts": "5.0.1",
 		"typescript": "4.8.4",

src/App.tsx

@@ -1,15 +1,10 @@
 import { FC } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Login from "./pages/login/Login";
+import { useRoutes } from "react-router";
+import { routes } from "./routes/routes";
 
 const App: FC = () => {
-	return (
-		<BrowserRouter>
-			<Routes>
-				<Route path="/login" element={<Login />} />
-			</Routes>
-		</BrowserRouter>
-	);
+	const routing = useRoutes(routes);
+	return <>{routing}</>;
 };
 
 export default App;

src/index.tsx

@@ -4,11 +4,14 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
 import "./index.css";
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
 	<React.StrictMode>
-		<App />
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>
 	</React.StrictMode>
 );
 

src/pages/login/Login.tsx

@@ -100,26 +100,26 @@ const Login: FC = () => {
 					</div>
 					{/*form*/}
 					<div className="flex w-[90%] flex-col gap-2 text-[#3F72AF]">
-						<label htmlFor="email" className="text-[14px]">
+						<label htmlFor="email" className="text-[14px] font-normal">
 							Email
 						</label>
 						<input
 							type="email"
 							id="email"
 							{...formik.getFieldProps("email")}
-							className="rounded-md px-2 py-1 text-[12px] placeholder-[#3f72af]"
+							className="rounded-md px-2 py-1 text-[12px] font-light placeholder-[#3f72af]"
 							placeholder="example@multiemail.us"
 						/>
 					</div>
 					<div className="relative flex w-[90%] flex-col gap-2 text-[#3F72AF]">
-						<label htmlFor="password" className="text-[14px]">
+						<label htmlFor="password" className="text-[14px] font-normal">
 							Password
 						</label>
 						<input
 							type={isPasswordVisible ? "text" : "password"}
 							id="password"
 							{...formik.getFieldProps("password")}
-							className="rounded-md px-2 py-1 text-[12px] placeholder-[#3f72af]"
+							className="rounded-md px-2 py-1 text-[12px] font-light placeholder-[#3f72af]"
 							placeholder="password"
 						/>
 						{isPasswordVisible ? (
@@ -136,11 +136,11 @@ const Login: FC = () => {
 					</div>
 					<button
 						type="submit"
-						className="rounded-md bg-[#5271ff] px-2 py-1 text-[14px] text-white"
+						className="rounded-md bg-[#5271ff] px-2 py-1 text-[14px] text-white font-normal font-light"
 					>
 						Log In
 					</button>
-					<p className="text-[12px]">
+					<p className="text-[12px] font-normal">
 						Don't have an account yet?
 						<Link to="/signup" className="text-[#5271ff] underline">
 							{` Sign Up `}

src/routes/routes.tsx

@@ -0,0 +1,7 @@
+import Login from "../pages/login/Login";
+
+export const routes = [
+	{ path: "/", element: <div>Welcome to MultiEmail Admin</div> },
+	{ path: "/login", element: <Login /> },
+	{ path: "*", element: <div>404. page not found</div> },
+];