React TypeScript 템플릿 간단한 Routing 소스

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BeforeLoginLayout from './Components/layouts/HomeLayout';
import {AuthenticateRoutes, UnAuthenticateRoutes} from './Components/layouts/PrivateRoute';
import { Route, useLocation, Navigate } from 'react-router-dom';
import Register from './Components/layouts/Register';
import Login from './Components/layouts/Login';
import AfterLoginLayout from './Components/layouts/AfterLoginLayout';
import LandingPage from './Components/layouts/LandingPage';
//

import { BrowserRouter as Router, Routes } from 'react-router-dom';


function App() {
  return (
    <div >
      <Routes>
        <Route element={<UnAuthenticateRoutes />}>
          <Route path="/" element={<BeforeLoginLayout />}>
            <Route index element={<Login />} />
            <Route path="register" element={<Register />} />
          </Route>
        </Route>
        <Route element={<AuthenticateRoutes />}>
          <Route path="/admin" element={<AfterLoginLayout />} >
            <Route index element={<LandingPage />} />
            <Route path="test" element={<LandingPage />} />
          </Route>
        </Route> 
      </Routes>
      {/* <Greeting name="John" />*/}
    </div>
  );
}

export default App;

 

 

index.tsx

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') as HTMLElement
);
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();

 

 

 

 

 

관련 소스

https://github.com/wahyueko22/learn-react