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

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 ponents 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 "./ponents/core/appShell";
import { useNavigate } from 'react-router-dom';

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

App shell ponent

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

class AppShell extends Component {

    ponentDidMount() {
        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 ponent 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?

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

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 ponents 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 "./ponents/core/appShell";
import { useNavigate } from 'react-router-dom';

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

App shell ponent

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

class AppShell extends Component {

    ponentDidMount() {
        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 ponent 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?

• javascript
• reactjs
• react-router-dom

• Is import { useNavigate } from 'eact-router-domr';... the import package, a typo? – Drew Reese Commented Jan 14, 2022 at 0:18
• Yes, a typo. @DrewReese Fixed it. – Amjad Commented Jan 14, 2022 at 0:29
• I copy/pasted your code into a running codesandbox and see a warning about needing to call navigate in an useEffect hook and not on the initial render. Can you describe better the usecase you are trying to solve for? – Drew Reese Commented Jan 14, 2022 at 0:33
• @DrewReese Updated the question with the business problem I am trying to solve. Also, I don't know about any warning, as I am not getting any. – Amjad Commented Jan 14, 2022 at 0:39
• Based on your question update it seems you want/need to implement route "authentication". – Drew Reese Commented Jan 14, 2022 at 0:46

2 Answers 2

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

Create a wrapper ponent that accesses the auth context (local state, redux store, local storage, etc...) and based on the auth status renders an Outlet ponent 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 ponent for nested protected routes.
• Navigate ponent 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>
    </>
  );
}

Use navigate method in useEffect like this shown below:

Imports

import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";

Use following code

const navigate = useNavigate();
const [logged, setLogged] = useState(null);

const logout = () => {
   localStorage.clear();
   console.log("Logged out");
   setLogged(Math.random());
};

useEffect(() => {
  navigate("/login");
}, [logged]);