Dynamically Render a Splash Page if the user isn't authenticated

Question

I am currently trying to render a SplashPage whenever the user isn't authenticated. The problem that I am running into, is when I click the Login or Signup button that is supposed to redirect them to their respective forms, it doesn't work because the user isn't authenticated. I am currently using React Router 6

import React, { useEffect } from 'react'
import './App.css'
import ShoeContainer from './components/ShoeContainer';
import ShoeCard from './components/ShoeCard';
import { createContext } from 'react';
import { useState } from 'react';
import ShoeForm from './components/ShoeForm';
import LatestShoe from './components/LatestShoe';
import SignUp from './components/SignUp';
import Login from './components/Login';
import Review from './components/Review';
import SplashPage from './components/SplashPage';

import { Routes, Route} from 'react-router-dom'
export const AppContext = createContext(null)

function App() {
  const [latestPost, setLatestPost] =useState(AppContext)
  const [shoes, setShoes] = useState([])

  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [currentUser, setCurrentUser] = useState(null)

useEffect(() => {
  fetch('/shoes').then(r => r.json()).then(data => setShoes(data))
}, [])


useEffect(() => {
  fetch("/me").then((res) => {
    if (res.ok) {
      res.json().then((user) => {
        setCurrentUser(user)
        setIsAuthenticated(true)
      })
    }
  })
}, [])





if (!isAuthenticated) return <SplashPage/>



  return (
    
    <div className="App">
      <AppContext.Provider value={{latestPost, setLatestPost}}>
      <Routes>
        <Route path = "/welcome" element = {<SplashPage/>}/>
        <Route path ='/shoes' element={<ShoeContainer shoes = {shoes} setCurrentUser={setCurrentUser}/> }/>
        <Route path ='/createshoe' element = {<ShoeForm/>}/>
        <Route path ='/latestshoe' element ={<LatestShoe/>}/>
        <Route path = '/signup' element = {<SignUp setCurrentUser={setCurrentUser}/>}/>
        <Route path = '/login' element = {<Login setCurrentUser={setCurrentUser}/>}/>
        <Route path = '/reviews' element = {<Review/>}/>
      </Routes>
      </AppContext.Provider>

      
    </div>
  );
}

export default App;

import React from 'react'
import {useNavigate} from 'react-router-dom'



function SplashPage () {
    const navigate = useNavigate()
    function navigateLogin () {
        navigate('/login')
    }

    function navigateSignup () {
        navigate('/signup')
    }



return(
    <div>
    <button onClick = {navigateLogin}>Login</button>
    <br/>
    <button onClick = {navigateSignup}>Signup</button>
    </div>
)

}



export default SplashPage

Dynamically Render a Splash Page if the user isn't authenticated

0 Answers0