How to change the default url when a react app is run with yarn start or npm start?

Question

I have created a react app in which I have a login page as the first page and we login it enters into the application. So when I run the app using "yarn start" the app runs at "localhost:8082" by default but I want that when I run "yarn start" command it shows the url like "localhost"8082/Login" because the first page is the login page.

And when I successfully logged in it again shows "localhost:8082" but I want after login it shows "localhost:8082/Home".

So is there any way to change the url like this that I mentioned.

Attaching some code for reference.

App.tsx code:-

import "./css/App.css";
import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";
import { Login } from "./pages/Login";
import Routers from "./components/Routers";

function App() {
  return (
    <div>
      <AuthenticatedTemplate>
        <Routers />
      </AuthenticatedTemplate>

      {
        <UnauthenticatedTemplate>
          <Login />
        </UnauthenticatedTemplate>
      }
    </div>
  );
}

export default App;

Routers.tsx code:-

import { BrowserRouter, Routes, Route, Outlet} from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";

function Routers() {
  return (
    <div className="Routers">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Home" element={<Home />} /> 
          <Route path="/About" element={<About />} />
          <Route path="/Contact" element={<Contact />} />
        </Routes>
        <Outlet />
      </BrowserRouter>
    </div>
  );
}

export default Routers;

So I want that the first page when I run "yarn start" command will be "localhost:8082/Login" and when I login the url must be "localhost:8082/Home".

I have tried it to achieve it through different ways but I was unable to do so. I don't want to add a homepage element in package.json as it is not working in my case.

Answer 1

Short of just starting the app and navigating to "/login" directly you could use a mounting useEffect hook in the root component of your app to manually redirect to "/login". I'd really suggest implementing protected routes and place the home "/" route under protection so unauthenticated users will be redirected to "/login" automatically.

Create protected authenticated and unauthenticated route components.

import { Navigate, Outlet, useLocation } from 'react-router-dom';
import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";
import { useAuth } from '../path/to/AuthContext'; // <-- you'll need to implement this, however it fits with the Azure authentication

const PrivateRoutes = () => {
  const location = useLocation();
  const { isAuthenticated } = useAuth();

  if (isAuthenticated === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return isAuthenticated 
    ? (
      <AuthenticatedTemplate>
        <Outlet />
      </AuthenticatedTemplate>
    )
    : <Navigate to="/login" replace state={{ from: location }} />;
}

const AnonymousRoutes = () => {
  const { isAuthenticated } = useAuth();

  if (isAuthenticated === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return isAuthenticated 
    ? <Navigate to="/" replace />
    : (
      <UnauthenticatedTemplate>
        <Outlet />
      </UnauthenticatedTemplate>
    );
}

Routers.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import { Login } from "./pages/Login";
import { AnonymousRoutes, PrivateRoutes } from '../components/auth';

function Routers() {
  return (
    <div className="Routers">
      <BrowserRouter>
        <Routes>
          <Route element={<PrivateRoutes />}>
            <Route path="/" element={<Home />} />
            <Route path="/Home" element={<Home />} /> 
            <Route path="/About" element={<About />} />
            <Route path="/Contact" element={<Contact />} />
          </Route>
          <Route element={<AnonymousRoutes />}>
            <Route path="/login" element={<Login />} />
          </Route>
        </Routes>
        <Outlet />
      </BrowserRouter>
    </div>
  );
}

App.tsx

import Routers from "./components/Routers";

function App() {
  return (
    <div>
      <Routers />
    </div>
  );
}