Passing props through route in reactjs

Question

I am new to reactjs and have simple question. I want to pass auth props to Login component and want to update its value from within Login component. How can I pass auth to Login component and update its value from Login component.

Secondly, I have one protected route and only logged-in users can open that component. I added Private method to implement this. Is this right approach of making some components protected ?

import "./App.css";
import {
    BrowserRouter,
    Routes,
    Route,
    Switch,
    Navigate,
    NavLink,
} from "react-router-dom";

import Home from "./pages/Home";
import Login from "./pages/Login";
import RequestDemo from "./pages/RequestDemo";
import ProtectedRoute from "./Protected.Route";

const auth = true; //your logic

const Private = ({ Component }) => {
    return auth ? <Component /> : <Navigate to="/login" />;
};

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route exact path="/Login" element={<Login />} />
                <Route
                    path="/RequestDemo"
                    element={<Private Component={RequestDemo} />}
                />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Answer 1

For auth variable I would suggest using as a State or context, below I have provided an example using context, you can do it with State also

import './App.css';
import { BrowserRouter,Routes, Route, Switch, Navigate, NavLink } from 'react-router-dom';

import Home from './pages/Home';
import Login from './pages/Login';
import RequestDemo from './pages/RequestDemo';
import ProtectedRoute from './Protected.Route';
import { useContext } from 'react';

// In the login Component

const LoginComponent = () => {
  const authContext = useContext(MyContext);

  const handleLogin = () => {
    authContext.onAuthChange(true); // this will make the user login that change the value of auth to true
  }

  return (
    <div>Login JSX</div>
  )
}

const MyContext = React.createContext(null);

const Private = ({Component}) => {
  const authContext = useContext(MyContext);
  return authContext.auth ? <Component  /> : <Navigate to="/login" />
}

function App() {
  const [auth, setAuth] = React.useState(true);

  const handleAuthChange = (newAuthState) => {
    setAuth(newAuthState);
  }

  return (
    <MyContext.Provider value={{
      auth,
      onAuthChange: handleAuthChange
    }}>
      <BrowserRouter>
        <Routes>
          <Route exact path='/' element={<Home />} />
          <Route exact path='/Login' element={<Login />} />
          <Route path='/RequestDemo' element={<Private Component={RequestDemo} />} />
        </Routes>
      </BrowserRouter>
    </MyContext.Provider>
    
    
  );
}

export default App;

Answer 2

1. In your case first you have to change auth from const to let as you want to change auth. Then you have to pass auth and an function which can update auth in the same file(where auth is declared) hence you will pass 2 props auth and function which updates auth.
From your code syntax I'm assuming you are using v6.

import "./App.css";
import {
    BrowserRouter,
    Routes,
    Route,
    Switch,
    Navigate,
    NavLink,
} from "react-router-dom";

import Home from "./pages/Home";
import Login from "./pages/Login";
import RequestDemo from "./pages/RequestDemo";
import ProtectedRoute from "./Protected.Route";

let auth = true; // you can mutate let and not constant

const authUpdate = (argument) => {
    // update auth in this function and pass this function to the component
    console.log(auth + 1);
    // if you want some argument or parameter you can do so by declaring argument
    console.log(argument); // only if you want to send some argument or else no need
};

const Private = ({ Component }) => {
    return auth ? <Component /> : <Navigate to="/login" />;
};

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route
                    exact
                    path="/Login"
                    element={<Login auth={auth} authUpdate={authUpdate} />} // passed auth and authUpdate as props
                />
                <Route
                    path="/RequestDemo"
                    element={<Private Component={RequestDemo} />}
                />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

2. There's more than one way for protected route. Yes, you can do it like that as mentioned in code snippet.

PS: I suggest you to use state for auth if you want to trigger re-rendering and want to update auth value at parent and child component level both. If component doesn't re-render's then prop/variable won't be updated

import { useState } from "react";

const [auth,setauth]=useState(true)

const authUpdate=()=>{
    // pre-steps
    setauth(auth=>!auth)
    // you should avoid passing setauth directly as a prop
    // down the line in child component you can forget what setauth does and you can set something different  
}

If you want to use certain variable/state in all child component you can look into Store or Global State concept. You can use react-redux or useContext which does not need to pass props from parent component to child component (prop drilling)