Reuse navbar component in every private route in react

Question

I am making a mern app with login and registration system and i want to show the navbar only after user logged in and in some other routes which are accessible only after user is logged in , now i can just include the nav bar file in every route but i was wondering how to reuse it , like react is known for SPA and i dont want to load this navbar component everytime i go to another route but i am not sure how to achieve this with private routes , i thought of addding the navbar in my protected_routes_2.js from where i redirect but i am not sure that if it will load it every time or it will work as SPA(single page application) Here is my code:- App.js:-

function App() {
    const isloggedin = sessionStorage.getItem('isloggedin');
    const rememberMe = localStorage.getItem('rememberMe')

    
return (
    <>
            <Router>
                {/* <Navbar/> */}
                <Routes>
                    
                    <Route exact path="/" element={<Protected_routes/>}></Route>
                    <Route path="/verify/:first_name/:email" element={<Verification/>}></Route>
                    <Route path="/forgot_password" element={<Forgot_password/>}></Route>
                    <Route path="/weather" element={
                        <Protected_routes_2>
                            <Weather/>
                        </Protected_routes_2>}>
                    </Route>
                    <Route path="/friends" element={
                        <Protected_routes_2>
                            <Friends/>
                        </Protected_routes_2>}>
                    </Route>


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

export default App;

protected_routes_2.js:-

const Protected_routes_2 = (props) => {
    const Navigate = useNavigate();
    const auth_check = useSelector(state => state.auth)
    const dispatch = useDispatch();
    const {auth_checking,user_data} = bindActionCreators(action,dispatch)

    const private_routes = async() =>{
        const res = await fetch('/getdata',{
            method:'POST',
            headers:{
                'Content-Type' : 'application/json',
                'x-auth-token':localStorage.getItem('token')
            }
        })
        const data = await res.json();
        
        if(data.status == 201){
            {auth_checking('true')}
        }
        else{
            {auth_checking('false')}
        }
    }

    useEffect(()=>{
        private_routes()
    },[])

    if (auth_check=='true') {
        return props.children
    } else {
            return <Landing_page/> 
        }


    
}

export default Protected_routes_2

Answer 1

If I understood well you want the navbar appearing for connected users. You have to access the fact your user is connected or not in your App.jsx file and then you can just conditionnaly render the NavBar:

{user &&  <Navbar/> }