React router dom navigate method is not working properly

Question

Hei, I am trying to build a simple react app with a navigation feature. The main theme is I have 3 components, App, Test, and AppShell. App component is the default(Initial) component. And what I want is that Every time user goes to App component, my app will redirect to Test component .

The problem I am facing is that my redirection only works when I load the application the first time, after that my redirection is not working.

I am sharing my three components code below along with the index page!

Index page

    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import {
        BrowserRouter as Router,
        Routes,
        Route
    } from "react-router-dom";

    ReactDOM.render(
      <Router>
          <Routes>
              <Route path='/' element={<App />} />
              <Route path='/test' element={<Test />} />
          </Routes>
      </Router>,
      document.getElementById('root')
    );

    function Test() {
        return <h1>Test Me</h1>;
    }

    reportWebVitals();

App Component

import "./App.css";
import AppShell from "./components/core/appShell";
import { useNavigate } from 'react-router-dom';

export default function App(props) {
    let navigate = useNavigate();
    return <AppShell {...props} navigate={navigate} />;
}

App shell component

import React, { Component } from 'react';
import { Outlet } from "react-router-dom";

class AppShell extends Component {

    componentDidMount() {
        this.props.navigate('/test');
    }

    render() {
        return (
            <div>
                <h1>This is app shell</h1>
                <Outlet />
            </div>
        );
    }
}

export default AppShell;

I thought the problem is lies within component hooks, so I tried to implement the redirection inside the constructor too, but nothing is working for me!

The basic business problem I am trying to solve here is - A user will be redirected to a login page, every time he/she tries to browse another page regardless of valid login(valid user) could be based on the valid token on local storage

Could anyone say, What I am doing wrong?

Answer 1

Authentication with regards to protected routes is actually pretty trivial in react-router-dom v6

Create a wrapper component that accesses the auth context (local state, redux store, local storage, etc...) and based on the auth status renders an Outlet component for nested routes you want to protect, or a redirect to your auth endpoint.

Example AuthWrapper :

const AuthWrapper = () => {
  const location = useLocation();
  const token = !!JSON.parse(localStorage.getItem("token"));

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

Uses:

• useLocation hook to grab the current location user is attempting to access.
• Outlet component for nested protected routes.
• Navigate component for declarative navigation, sends the current location in route state so user can be redirected back after authenticating.

Example Usage:

<Router>
  <Routes>
    <Route element={<AuthWrapper />}>
      <Route path="/" element={<App />} />
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</Router>

Login - In the authentication handler, once authenticated, set the localStorage and navigate to the location that was passed in route state.

function Login() {
  const { state } = useLocation();
  const navigate = useNavigate();

  const { from = "/" } = state || {};

  const login = () => {
    localStorage.setItem("token", JSON.stringify(true));
    navigate(from);
  };
  return (
    <>
      <h1>Test Me</h1>
      <button type="button" onClick={login}>Log In</button>
    </>
  );
}