[React] (pre-assignment) Layout, page routing, file structure

file structure

components: common JS files
pages: routes

Page Routing

1. npm install react-router-dom

2. (index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

3. (app.js)

import Router from './router';

function App() {
  return (
    <>
      <Router />
    </>
  );
}

export default App;

4. (router.js)

import { Routes, Route } from 'react-router-dom';
import Layout from './Layouts/Layout';
import Login from './pages/Login';
import PageA from './pages/PageA';
import PageB from './pages/PageB';
import PageC from './pages/PageC';

const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<Layout />} >
        <Route path="/pageA" element={<PageA />} />
        <Route path="/pageB" element={<PageB />} />
        <Route path="/pageC" element={<PageC />} />
      </Route>
      <Route path="/login" element={<Login />} />
    </Routes>  
  )
}
export default Router;

5. (Layout.js)
   <Outlet />을 컴포넌트를 보여주고자 하는 자리에 넣기

import React from 'react';
import { Outlet } from 'react-router-dom';
import styled from 'styled-components';
import Header from '../components/Header';
import Sidebar from '../components/Sidebar';

const Home = () => {
  return (
    <div className="wrap">
      <Header />
      <StLayout className="container">
        <div className="left-sidebar">
          <Sidebar />
        </div>
        <StContent className="right-content">
          <Outlet />
        </StContent>        
      </StLayout>       
    </div>    
  )
}
const StLayout = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`
const StContent = styled.div`
width: calc(100% - 200px);
`
export default Home;

react-router-dom v6 - <Outlet />
reference: https://ui.dev/react-router-nested-routes

pre-assignment: https://github.com/jamie7dev/wanted-pre-onboarding-3-FE-quest.git