score:1

Accepted answer
import React, { useEffect } from "react";
import {
  BrowserRouter,
  Route,
  Routes,
  Link,
  useNavigate
} from "react-router-dom";

function isLoggedIn() {
  // In real life this function is calling a REST endpoint and awaiting the result
  return localStorage.getItem("loggedin") !== null;
}

async function setLoginStatus(status) {
  // In real life this function is calling a REST endpoint and awaiting the result
  if (status) {
    localStorage.setItem("loggedin", "1");
  } else {
    localStorage.removeItem("loggedin");
  }
}

function DashboardPage() {
  return (
    <div>
      <h1>Dashboard page</h1>
      <p>This is the dashboard page</p>
      <Link to={"/accounts"}>Accounts</Link>
      <br />
      <Link to={"/logout"}>Logout</Link>
    </div>
  );
}

function AccountsPage() {
  return (
    <div>
      <h1>Accounts page</h1>
      <p>This is the accounts page</p>
      <Link to={"/dashboard"}>Dashboard</Link>
      <br />
      <Link to={"/logout"}>Logout</Link>
    </div>
  );
}

function LoginPage() {
  const navigate = useNavigate();

  async function handleLogin(event) {
    event.preventDefault();
    await setLoginStatus(true);
    navigate("/dashboard");
  }

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleLogin}>
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

function LogoutPage() {
  const navigate = useNavigate();

  useEffect(() => {
    const logoutAccount = async () => {
      await setLoginStatus(false);
      navigate("/login");
    };
    logoutAccount();
  });

  return <p>Logging out</p>;
}

const PrivateRoute = ({ component, ...rest }) => {
  if (isLoggedIn()) {
    const routeComponent = props => React.createElement(component, props);
    return <Route {...rest} render={routeComponent} />;
  } else {
    return <LoginPage />;
  }
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <PrivateRoute path="/" element={<DashboardPage />} />
        <PrivateRoute path="/dashboard" element={<DashboardPage />} />
        <PrivateRoute path="/accounts" element={<AccountsPage />} />
        <Route path="/login" element={<LoginPage />} />
        <PrivateRoute path="/logout" element={<LogoutPage />} />
        <PrivateRoute path="/*" element={<DashboardPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

score:-2

<Switch>
  <Route exact path='/' />
  <Route exact path='/about' />
  <Route component={NotFoundPage} />
</Switch>

score:0

import {BrowserRouter, Route, Routes, Switch, useNavigate} from "react-router-dom";

[...]

    return (
        <BrowserRouter>
            <AuthenticationLock isLoggedIn={loginStatus}>
                <Routes>
                    <Switch>
                        <Route path="/" exact={true} element={<AdminPage/>}/>
                        <Route path="/admin" exact={true} element={<AdminPage/>}/>
                        <Route path="/login" exact={true} element={<LoginPage/>}/>
                        <Route path="/logout" exact={true} element={<LogoutPage/>}/>
                        <Route path="/*" element={<AdminPage/>}/>
                    </Switch>
                </Routes>
            </AuthenticationLock>
        </BrowserRouter>
    );

Related Query

More Query from same tag