2. 3 Xây dựng router chuyển hướng khi chưa đăng nhập vào trang đăng nhập (ok)

C:\Users\Administrator\Desktop\typescript\src\index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

C:\Users\Administrator\Desktop\typescript\src\App\index.tsx

import React from 'react'
import Routes from './../routes';
function App() {
  return <Routes />
}
export default App

C:\Users\Administrator\Desktop\typescript\src\routes\index.tsx

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import HomeRoutes from './HomeRoutes';
import LoginRoutes from './LoginRoutes';
function Routes() {
  return (
    <Router>
    	<HomeRoutes />
      <LoginRoutes />
    </Router>
  )
}
export default Routes;

C:\Users\Administrator\Desktop\typescript\src\routes\HomeRoutes.tsx

import React from 'react';
import { Switch } from 'react-router-dom';
import Home from './../pages/Home';
import { PATH } from './../constants/paths';
import AuthenticatedGuard from './../guards/AuthenticatedGuard';
function HomeRoutes() {
  return (
    <Switch>
      <AuthenticatedGuard exact={true} path={PATH.HOME} component={Home} />
    </Switch>
  )
}
export default HomeRoutes;

C:\Users\Administrator\Desktop\typescript\src\routes\LoginRoutes.tsx

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { PATH } from './../constants/paths';
import Login from './../pages/Login';
function LoginRoutes() {
  return (
    <Switch>
      <Route path={PATH.LOGIN} component={Login} />
    </Switch>
  )
}
export default LoginRoutes;

C:\Users\Administrator\Desktop\typescript\src\guards\AuthenticatedGuard\index.tsx

import React, {Component} from 'react';
import { Route, RouteProps, Redirect, RouteComponentProps } from 'react-router-dom';
interface IProps {
  exact: boolean;
  path:string;
  component: any;  
}
function AuthenticatedGuard(Props: IProps) {
  const token = "";
  return (
    <Route
      render = { props => {
        if (token === "") {
          return <Redirect to="/login" />
        }
        return <Component {...props} />
      }}
    />
  )
}
export default AuthenticatedGuard;

C:\Users\Administrator\Desktop\typescript\src\constants\paths.tsx

export const PATH = {
  HOME: '/',
  PRODUCT: '/product',
  LOGIN: '/login'
}

C:\Users\Administrator\Desktop\typescript\src\constants\styles.tsx

export const BREAKPOINT = {
  SM: 576,
  MD: 768,
  LG: 992,
  XL: 1200,
  XXL: 1400
}
export const COLOR = {
  BLUE: '#0d6efd'
}

C:\Users\Administrator\Desktop\typescript\package.json

{
  "name": "typescript",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^5.1.6",
    "@types/styled-components": "^5.1.4",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.4",
    "styled-components": "^5.2.0",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}