[v6] Can't access my "/admin" page on production

[PazzeG]

Config:

react-router-dom v6.0.2,

react v17.0.0,

firebase v9.5.0

Hello,

My app is hosted by netlify, all public routes are ok and I've set up my environment variables on netlify. I even set a _redirects file .But when I try to go on signup/login page I get a 404:

Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

Those pages are related to a private route leading to a dasboard.
I really don't know where it's coming from, if it's react-router-dom, Firebase or netlify. If you got any clue, I will appreciate =). I let you below the files.

PrivateRoute.jsx

import React from 'react'
import {Navigate} from 'react-router-dom'
import { auth } from '../../Firebase'

function PrivateRoute({children}) {
    const user = auth.currentUser
    return user ? children : <Navigate to='/login' replace /> 
    }
export default PrivateRoute

Login.jsx similar to SignUp

import { useRef, useState } from 'react';
import { useAuth } from '../context/AuthContext';
import {useNavigate} from 'react-router-dom';
import './Login.css'

export default  function Login() {
    const emailRef = useRef()
    const passwordRef = useRef()
    const {login} = useAuth()
    const [error, setError]= useState('')
    const [loading, setLoading]= useState(false)
    const navigate= useNavigate()
    
    async function handleSubmit(e) {
        e.preventDefault()
        try{
            setError('')
            setLoading(true)
            await login(emailRef.current.value, passwordRef.current.value)
            navigate("/admin")
        }
        catch{
        setError('Fail to log in')
        }
        setLoading(false)
    }
    
    return (
    <>
     *login form*
    </>
    )
}

AuthContext.jsx

import {useContext, useState, useEffect, createContext} from 'react'
import { auth } from '../../Firebase'
import {  createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "firebase/auth";

const AuthContext = createContext()

export function useAuth() {
     return useContext(AuthContext)
}

export function AuthProvider({children}) {
    const [currentUser, setCurrentUser] = useState()
    const [loading, setLoading] = useState(true)
    
    function register(email, password){
        return createUserWithEmailAndPassword(auth, email, password)
    }
    
    function login(email, password){
        return signInWithEmailAndPassword(auth, email, password)
    }

    function logout() {
        signOut(auth)
    }

    useEffect(() =>{
      const unsubscribe = onAuthStateChanged(auth ,(user) => {
        setCurrentUser(user)
        setLoading(false)
        })
        return unsubscribe
    }, [])

    const value = {
        currentUser,
        login,
        register,
        logout
    }

    return (
        <AuthContext.Provider value={value}>
            {!loading && children}
        </AuthContext.Provider>
    )
}

App.jsx

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import PrivateRoute from './Components/Private/PrivateRoute';
import Signup from './Components/Signup/Signup'
import Login from './Components/Login/Login'
import Admin from './Components/Admin/Admin'

function App() {

  return (
  <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path="/signup" element={<Signup />}/>
          <Route path="/login" element={<Login />}/>

          <Route 
            path="/admin" 
            element={
              <PrivateRoute>
                <Admin />
              </PrivateRoute> 
            } 
          />

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

export default App;

[mnaray]

For Netlify, you need to add a _redirect file to the public directory of your react-app. (No file extension needed!)

In that file you need to enter the following paths to allow every redirect.
/* /index.html 200
This should be the only line you need.

It basically tells the Netlify host to send the HTTP-code 200 (OK) to the client on every redirect.

I hope this helps. Please let me know if it doesn't! 😃