I have a project and in this project I have three pages, the first is for SignUp, the second is for Login, and the third is for Lists, in addition to the presence of a header. My problem is that I want to hide the header from the SignUp and Login page and show it only on the List page

How can i do that?

App.tsx:

import { Routes, Route } from "react-router-dom";
import SignUp from "./components/ui/registeration/signup";
import SignIn from "./components/ui/registeration/signin";
import { useDispatch } from "react-redux";
import { addUser } from "./redux-store/actions/action";
import Header from "./components/ui/header-footer/header";
import Lists from "./components/ui/todo/lists/lists";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  header:{
    paddingTop: '7rem'
  },
  main:{
    padding: '2rem'
  }
}));

const App = () => {
  const classes = useStyles();
  const dispatch = useDispatch();

  const onAddUser = (email: string, name: string) => {
    dispatch(addUser(email, name));
  };
  return (
    <>
     <div className={classes.header}>
        <Header />
      </div>
      <div>
        <main>
          <Routes>
             <Route path="/" element={<SignUp addUser={onAddUser} />} />
            <Route path="signin" element={<SignIn />} /> 
            <Route path="/lists" element={<Lists />} />
          </Routes>
        </main>
      </div>
    </>
  );
};

export default App;

CodePudding user response：

Ideally, what makes more sense to me is to get a state from redux like isAuthenticated or user after the action addUser.

For example,

...
import { useDispatch, useSelector } from "react-redux";

...
const App = () => {
  ...
  const { isAuthenticated } = useSelector((state) => state.user);
  // Or user etc

  return (
    <>
     {
       isAuthenticated && (
         <div className={classes.header}>
           <Header />
         </div>
       )
      ...
    </>
  );
};