1

So I want to have one or possibly more Routes in the future to be protected and only accessible if the user is authenticated, but so far I only have the "/dashboard" route as Protected but I when I run the website nothing gets renders on my pages, only white screen and no errors on the console only this shows up there.

I've also tried just swapping the isAuth ternary for a dummy true or false, but I get the same result.

Loading React Element Tree... If this seems stuck, please follow the troubleshooting instructions.

this is my code:

ProtectedRoute.js

import { Outlet } from 'react-router-dom'
import { AppContext } from '../contexts/AppContext'
import Login from '../pages/Login';

const userAuth  = () => {
 
  const {isAuthenticated} = useContext(AppContext);
  return isAuthenticated; 

}

const ProtectedRoute = () => {

    const isAuth = userAuth();

  return isAuth ? <Outlet/> : <Login/>
}

export default ProtectedRoute;

App.js

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Home from './pages/Home';
import Login from './pages/Login';
import ProtectedRoute from './utils/ProtectedRoute';

function App() {
    return (
        <Routes>
            <Route path='/' element = {<Home/>} />
            <Route path='/login' element = {<Login/>} />
            <Route element={<ProtectedRoute/>}>
                <Route path='/dashboard' element= {<Dashboard/>} />
            </Route>
        </Routes>
    );
}

export default App;

EDIT

I actually do have an error of invalid Syntax.

console error

EDIT2

I simplyfied my code and also implemented Navigate sill syntax error...

caught SyntaxError: Unexpected token '<' (at ProtectedRoute.js?t=1683234715943:8:28)

ProtectedRoute.js

import React, { useContext } from 'react'
import { Outlet, Navigate } from 'react-router-dom'
import { AppContext } from '../contexts/AppContext'

const ProtectedRoute = () => {
  const { isAuthenticated } = useContext(AppContext);

  return isAuthenticated ? <Outlet/> : <Navigate to='/login' replace />;
}

export default ProtectedRoute;
André Gomes
  • 397
  • 1
  • 3
  • 17
  • I don't think this is an issue with the router or routing code or the `ProtectedRoute`, I don't see any overt issues here with this code. Are there any error messages in the console? If you inspect the DOM what is actually rendered there? Just FYI, it's more conventional for the `ProtectedRoute` component to redirect to your `"/login"` route in the case that a user needs to authenticate. See my answer [here](https://stackoverflow.com/a/66289280/8690857) for greater explanation and example. – Drew Reese May 04 '23 at 16:37
  • Yes there is an error in the console actually, syntax error related to the ternary operator. – André Gomes May 04 '23 at 17:55
  • It looks like that's a problem rendering one of either the `Outlet` or `Login` component. My money's on there is an issue with `Login`. The URL in the image is `"/login"` though, so it's unclear why `ProtectedRoute` is rendering. Is there an error message in the console to way what the issue is? – Drew Reese May 04 '23 at 17:59
  • Woah.... look at the `Login` component import... what is `"/src/pages/Login.jsx?t=1683218967769";`? The imports shouldn't have what looks like a URL queryString param as part of them. – Drew Reese May 04 '23 at 18:02
  • This syntax error seems to be related to the import of the page but why tho? it's such a simple import and everything matches – André Gomes May 04 '23 at 18:53
  • I see the other imports also look a bit *odd*. How are you building this app and serving it locally? Can you create a ***running*** [codesandbox](https://codesandbox.io/) demo of your code that (*hopefully*) reproduces the issue that we could inspect live? – Drew Reese May 04 '23 at 18:58
  • 1
    This might just be a transpiler issue. Rename the file from `ProtectedRoute.js` to `ProtectedRoute.jsx` so it's clear that JSX syntax is used. Be sure to also set VScode's language mode to "Javascript JSX" in case it's just an IDE issue (*since App.js doesn't appear to have this problem*). – Drew Reese May 04 '23 at 21:22
  • that solved. holy cow! just swapping js with jsx, so simple yet so hard to find. thanks a lot! – André Gomes May 04 '23 at 21:25
  • 1
    Anytime. I'm voting to close this as "Not reproducible or was caused by a typo". Cheers and good luck! – Drew Reese May 04 '23 at 21:27

2 Answers2

0

as @Drew Reese pointed out all I had to do was to change the file type from ProtectedRoute.js to ProtectedRoute.jsx

André Gomes
  • 397
  • 1
  • 3
  • 17
-1

Your code need some changes.You need to wrap your component with ProtectedRoute.

ProtectedRoute.js

import { AppContext } from '../contexts/AppContext'
import Login from '../pages/Login';

const userAuth  = () => {
 
  const {isAuthenticated} = useContext(AppContext);
  return isAuthenticated; 

}

const ProtectedRoute = ({children}) => {

    const isAuth = userAuth();

  return isAuth ? children : <Login/>
}

export default ProtectedRoute;

App.js

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Home from './pages/Home';
import Login from './pages/Login';
import ProtectedRoute from './utils/ProtectedRoute';

function App() {
    return (
        <Routes>
            <Route path='/' element = {<Home/>} />
            <Route path='/login' element = {<Login/>} />
            <Route path='/dashboard' 
                   element= {
                    <ProtectedRoute>
                        <Dashboard/>
                     <ProtectedRoute/>
                    } 
              />
        </Routes>
    );
}

export default App;
Prakhar Gupta
  • 1
  • 2