React/router & Layout

 

1. react-router

$ yarn add react-router-dom

 

2. 주요소스 정리

- index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from "react-router-dom";

import App from '~/App'

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <App />
  </Router>
);

- app.js

 

import React from 'react';
import RootRoutes from '~/routes/RootRoutes';

const App = () => {
  return (
    <React.Suspense>
      <RootRoutes />
    </React.Suspense>
  );
}

export default App;

- RootRoutes.js

// This is a React Router v6 app
import { Routes, Route, Navigate } from "react-router-dom";
import { SimpleLayout } from '~/views/layouts';
import SignIn from '~/views/components/sign/SignIn';

const RootRoutes = () => (
  <Routes>
    <Route element={<SimpleLayout />}>
      <Route path="/" element={<Navigate replace to="/sign-in/" />} />
      <Route path="/sign-in/" element={<SignIn />} />
    </Route>
  </Routes>
)

export default RootRoutes;

- layouts/SimpleLayout.js

import { Component } from "react";
import { Outlet } from "react-router-dom";

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Container from '@mui/material/Container';

const theme = createTheme();

class SimpleLayout extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Container component="main" maxWidth="xs">
          <Outlet />
        </Container>
      </ThemeProvider>
    )
  }
}

export default SimpleLayout;

- layouts/index.js

export { default as SimpleLayout } from './SimpleLayout';