reactjs - Login Page Seperate From APP (In React js)

Question

I am creating an application. In which First Page the User sees is the Login Page , then after user successful login user see the whole app view then. I have protected that I am using to check if user is Logged out they will redirect back to Login Page.

I am using react-router-dom and create-react-app.

current app.js

  return (
        <div className="container-fluid">
            <div className="row">
                <div className="col-md-3 col-sm-4 withBackgroundLight" id="column-of-sidebar">
                    <SideBar />
                </div>
                <div className="col-md-9 col-sm-8 withBackgroundLight">
                    <TopBar />
                    <Switch>
                        <Route exact path={['/', 'Sign-in']} component={Signin} />
                        <Route exact path={['/delivery-notes', '/credit-notes', '/debit-notes', '/purchase-notes', '/bills', '/expenses']} component={ComingSoon} />

                    
                        <Route path="/Sign-up" component={SignUp} />

                        <ProtectedRoute path="/clients" component={ClientDashboard} />
                    </Switch>
                </div>
            </div>
        </div>
    )

question from:https://stackoverflow.com/questions/65903211/login-page-seperate-from-app-in-react-js

Answer 1

Waitting for answers