React JS dont show Side NavBar at Login Screen

258 Views Asked by At

For this project, I use React.js and mdbootstrap. Currently, TableList is displayed on the left of every page. Unfortunately also at the Login page. My question is how can I remove TableList from there, but leave it on the other pages?

Does it have to be called up later? or elsewhere?

const App = () => {
const [showAdminContent, setShowAdminContent] = useState(false);
const [currentUser, setCurrentUser] = useState(undefined);

useEffect(() => {
    const user = AuthService.getCurrentUser();

    if (user) {
        setCurrentUser(user);
        setShowAdminContent(true);
    }
}, []);

const logOut = () => {
    AuthService.logout();
};

const bgcolor = { backgroundColor: '#1e63e9' }
return (
    <Router>
        <div>
            <MDBNavbar style={bgcolor} dark expand="md">
                <MDBNavbarBrand>
                    <strong className="white-text">App</strong>
                </MDBNavbarBrand>
                <MDBNavbarNav left>
                    <MDBNavItem active>
                        <MDBNavLink to="/list">Table List</MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                        <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                                <span className="mr-2">Dropdown</span>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu>
                                <MDBDropdownItem href="/list">Table List</MDBDropdownItem>
                            </MDBDropdownMenu>
                        </MDBDropdown>
                    </MDBNavItem>
                </MDBNavbarNav>
                <MDBNavbarNav right>
                    <MDBNavItem>
                        <MDBFormInline waves>
                            <div className="md-form my-0">
                                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                            </div>
                        </MDBFormInline>
                    </MDBNavItem>
                    <MDBNavItem>
                        <MDBNavLink to="/" onClick={logOut}>logOut</MDBNavLink>
                    </MDBNavItem>
                </MDBNavbarNav>
            </MDBNavbar>
            <div className="container">
                <div className="mb-3 ml-1 mr-3 mt-3 "> 
                    <TableList />
                </div>
                <div>
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route path="/table" component={AdminTables} />
                    <Route path="/switchtable" component={TabSwitch} />
                    <Route path="/list" component={test} />
                </Switch>
                </div>
            </div>
        </div>
    </Router>
);
1

There are 1 best solutions below

0
On

The solution was to first render the login and then call up the App.js, which is responsible for everything except login.