react-async-private-route

React Async Private Route

This library is designed for managing routes that depend a response asynchronous

• ## AsyncPrivateRoute 🚀

This component inherits the behavior of the Route component from react-router-dom and additionally implements the following properties

Params

component={DashboardView}: Component that renders if the conditions are met

path='/dashboard': Route that will evaluate the authorization conditions

routeRedirect='/': Redirection path in case the conditions are not met

accessIfExist={/*true / false */}: Pre-configuration for authorized users

accessIfNotExist={/*true / false */}: Pre-configuration for unauthorized users

persistentUser={user}: To avoid downloading at all times if a user is authorized, it is recommended to use state handlers such as Redux or Sagittariux

promise={fetchUser}: Server response, in case the user does not exist re recommends returning null

loaderComponent={Loader}: Component that renders while server response is not resolved

Example

const App = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path={PATH_CONTROLLER.ROOT.path} component={RootView} />
                <AsyncPrivateRoute
                    exact
                    component={withRouter(DashboardView)}
                    path={PATH_CONTROLLER.DASHBOARD_ROOT.path}
                    routeRedirect={PATH_CONTROLLER.ROOT.path}
                    accessIfExist={true}
                    accessIfNotExist={false}
                    persistentUser={
                        //recommended to use a state handler to 
                        //have persistent user in your application.
                        null
                    }
                    promise={userAPIRandomModule}
                    loaderComponent={LoaderView}
                />
                <Redirect exact to={PATH_CONTROLLER.ROOT.path} />
            </Switch>
        </BrowserRouter>
    );
};
 
export default App;
 

Get Started 🔥

• Add the following in the dependencies of your package.json

npm install react-async-private-route

• Ready to use

import AsyncPrivateRoute from 'react-async-private-route'

Run Demo :shipit:

• Clone this repository

git clone https://github.com/imenesesl/react-async-private-route.git

• Execute the following line

npm i

• Run demo

npm run demo