React router example

react-examples/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

react-examples/src/App.js → react-examples/src/Home/index.jsx

@@ -1,10 +1,9 @@
-import Welcome from './Welcome';
-import { Counter } from './Counter';
-import './App.css';
-import { Form } from './Form';
-import { Interval } from './Interval';
+import Welcome from '../Welcome';
+import { Counter } from '../Counter';
+import './Home.css';
+import { Form } from '../Form';
 
-function App() {
+export const Home = () => {
   const names = ["Ceci"];
 
   return (
@@ -17,10 +16,7 @@ function App() {
         ))}
         <Counter />
         <Form />
-        <Interval />
       </header>
     </div>
   );
 }
-
-export default App;

react-examples/src/Interval/index.jsx

@@ -0,0 +1,13 @@
+import React, { useEffect } from 'react';
+
+export const Interval = () => {
+  useEffect(() => {
+    const interval = setInterval(() => console.log('interval!'), 1000)
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <div>
+    Interval
+  </div>
+}

react-examples/src/Navbar/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const Navbar = () => {
+  return (
+    <nav>
+      <Link to='/'>Home</Link>
+      <Link to='/interval'>Interval</Link>
+    </nav>
+  )
+};

react-examples/src/Root/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+
+import { Home } from '../Home';
+import { Interval } from '../Interval';
+import { Navbar } from '../Navbar'
+
+export const Root = () => {
+  return (
+    <BrowserRouter>
+      <Navbar />
+      <Switch>
+        <Route exact path="/">
+          <Home />
+        </Route>
+        <Route path="/interval">
+          <Interval />
+        </Route>
+      </Switch>
+    </BrowserRouter>
+  );
+}

react-examples/src/Welcome/Welcome.module.css

@@ -0,0 +1,3 @@
+.App {
+  color: aqua;
+}

react-examples/src/Welcome.jsx → react-examples/src/Welcome/index.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
+import styles from './Welcome.module.css';
+
 const Welcome = ({ name, children, onClick }) => (
   <>
     {name
-      ? <h1 onClick={() => onClick(name)}>Welcome, {name}!</h1>
+      ? <h1 className={styles.App} onClick={() => onClick(name)}>Welcome, {name}!</h1>
       : <h1 onClick={() => onClick('Stranger')}>Welcome, Stranger!</h1>}
     {children}
   </>

react-examples/src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import { Root } from './Root';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Root />
   </React.StrictMode>,
   document.getElementById('root')
 );