Login Auth with React Apps - react-router-dom

app.js

//https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications

//By default, react-router-dom is now ^6.0.2.
//Below are the significant changes for the tutorial to use the new version of react-router-dom

//Line 14 -> Switch has been replaced with Routes
//Line 29/34 -> Switch has been replaced with Routes (2)

import React, { useState }from "react";
import "./App.css";
import Dashboard from './components/Dashboard/Dashboard.js';
import Preferences from './components/Preferences/Preferences'
import Login from './components/Login/Login';
import useToken from './components/App/useToken';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  const [data, setData] = React.useState(null);
  const { token, setToken } = useToken();

  if(!token) {
    return <Login setToken={setToken} />
  }

  return (
    <div className="wrapper">
    <h1>Application</h1>
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
        </Route>
        <Route path="/preferences" element={<Preferences />}>
        </Route>
      </Routes>
    </BrowserRouter>
  </div>
  );
}

export default App;