#31 [ Router ] React Router

src/App.js

@@ -2,10 +2,13 @@
 import React, { Fragment } from 'react';
 
 //* PROP
-import Prop_Drilling from './prop_drilling';
+// import Prop_Drilling from './prop_drilling';
 
 //* HOOK
-import Hook from './hooks/hook';
+// import Hook from './hooks/hook';
+
+//* ROUTER
+import RouterMain from './routers/router';
 
 //* LIB
 // import Lib from './libs/lib';
@@ -23,7 +26,10 @@ function App() {
       {/* <Prop_Drilling /> */}
 
       {/* HOOK */}
-      <Hook />
+      {/* <Hook /> */}
+
+      {/* ROUTER */}
+      <RouterMain />
 
       {/* LIB */}
       {/* <Lib /> */}

src/hooks/useState/useState.js

@@ -3,8 +3,8 @@ import React, { Fragment } from 'react';
 //* Hook
 // import LearnOne from "./learn_1";
 // import LearnTow from "./learn_2";
-import LearnThree from './learn_3';
-// import LearnFour from "./learn_4";
+// import LearnThree from './learn_3';
+// import LearnFour from './learn_4';
 // import LearnFive from "./learn_5";
 // import LearnSix from "./learn_6";
 // import LearnSeven from "./learn_7";
@@ -16,7 +16,7 @@ function UseState() {
     <Fragment>
       {/* <LearnOne /> */}
       {/* <LearnTow /> */}
-      <LearnThree />
+      {/* <LearnThree /> */}
       {/* <LearnFour /> */}
       {/* <LearnFive /> */}
       {/* <LearnSix /> */}

src/index.js

@@ -4,9 +4,6 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-//* LIBRARY
-import { BrowserRouter as Router } from 'react-router-dom';
-
 import 'react-toastify/dist/ReactToastify.css';
 
 //* ROOT
@@ -15,9 +12,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'), {
 });
 root.render(
   <React.StrictMode>
-    <Router>
-      <App />
-    </Router>
+    <App />
   </React.StrictMode>
 );
 

src/routers/1.Router Types/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const index = () => {
+  return (
+    <>
+      <h1>Router Types</h1>
+    </>
+  );
+};
+
+export default index;

src/routers/Main.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Main = () => {
+  return (
+    <>
+      <h1>Main</h1>
+    </>
+  );
+};
+
+export default Main;

src/routers/router.js

@@ -0,0 +1,18 @@
+//* REACT
+import React from 'react';
+
+//* LIBRARY
+import { BrowserRouter as Router } from 'react-router-dom';
+import Main from './Main';
+
+const RouterMain = () => {
+  return (
+    <>
+      <Router>
+        <Main />
+      </Router>
+    </>
+  );
+};
+
+export default RouterMain;