0

I want to disable the user from going into login page once they are logged in using navigate and only go into login page if they are not logged in but i get this error that navigate is not a route component. I am using react router dom v6 and so Redirect does not work either.Ive tried looking up solutions but none has worked out for me. Here is my code:

import React from 'react';
import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom'

import MasterLayout from './layouts/admin/MasterLayout';
import Home from './components/frontend/Home'
import Dashboard from './components/admin/Dashboard';
import Profile from './components/admin/Profile';
import Login from './components/frontend/auth/Login';
import Register from './components/frontend/auth/Register';
import axios from 'axios';

axios.defaults.baseURL = "http://localhost:8000";
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['Accept'] = 'application/json';

axios.defaults.withCredentials = true;
axios.interceptors.request.use(function (config){
  const token = localStorage.getItem('auth_token');
  config.headers.Authorization = token ? `Bearer ${token}` : '';
  return config;
});

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>

          <Route exact path="/" element={<Home/>} />
          
     

          
          <Route path="/login">
            {localStorage.getItem('auth_token') ? <Navigate to='/' /> : <Login />}
          </Route>
          <Route path="/register">
            {localStorage.getItem('auth_token') ? <Navigate to='/' /> : <Register />}
          </Route>

          <Route path="/admin/*" element={<MasterLayout />}> 
            <Route path="dashboard" element={<Dashboard />} />
            <Route path="profile" element={<Profile />} />
          </Route>
          

        </Routes>
      </Router>
    </div>
  );
}

export default App;
Roy Bandi
  • 1
  • 2

1 Answers1

0

Afaik, components passed inside route component as a child was v5 way of working. if we can working in v6 you can use element prop to send the component.

You need to change your routes to this.

<Route path="/login" element={localStorage.getItem('auth_token') ? <Navigate to="/" /> : <Login />} />
<Route path="/register" element={localStorage.getItem('auth_token') ? <Navigate to='/' /> : <Register />} />
CodeThing
  • 2,580
  • 2
  • 12
  • 25