| 0 | kirasiris | Website Tags:

Layout
My Login System Layout and Front End Layout

I basically just learned how to implement a login, register and recover password system in React!. It took me long enough so I really do not want to keep it as a secret to myself, besides, we as developer should support each other, right?.

Let’s say that it is all about Routing. Routing in React is one of the nicest features if not the core reason behind its creation. Just look at this code below:

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Switch>
            <Route path="/admin" component={Admin} />
            <Route path="/auth" component={Auth} />
            <Route path="/" component={Public} />
          </Switch>
        </Fragment>
      </Router>
    </Provider>
  );
};

export default App;

I’m sure you have an idea about what that is. This file is the app.js where all of the routes located in your app are found; this file renders in the index.html file as well.

Let’s go to the point. First, you might have all of your routes in the app.js file but that is ONLY useful when working with simple and small exercises such as a todo-list(which are boring and not even interesting). This routing shit begins to get more complex as you continue adding components and desired features in your src folder.

So what could I possibly do to tackle this issue of having a long ass file with shit tones of routes? Well, let’s explain that.

React gives us constants, variables, basic JavaScript stuff, am I right?. So what if we try to create a constant in the app.js file?, let’s say something like this:

const Public = ({ match }) => (
  <Fragment>
    <Switch>
      <Route component={PublicRoutes} />
    </Switch>
  </Fragment>
);

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Switch>
            <Route path="/admin" component={Admin} />
            <Route path="/auth" component={Auth} />
            <Route path="/" component={Public} />
          </Switch>
        </Fragment>
      </Router>
    </Provider>
  );
};

export default App;

In the code above, I’m creating a const named Public which contains a component that I’m importing in the top of the file. This component is basically what you would initially put in the app.js:

const PublicRoutes = () => {
  return (
    <>
      <Navbar />
      <main>
        <Alert />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/pages/:id" component={Page} />
          <Route component={NotFound} />
        </Switch>
      </main>
      <Footer />
    </>
  );
};

export default PublicRoutes;

You’re getting the idea, right? I’m basically just moving stuff from one file to another and calling them in the app.js file dynamically . We’re now done with the Public routes. Now what do we do to add Administration routes?…pretty much the same. You will have to create a new const with the name of your taste and then the const will have to be called-back inside the const App.

Thanks for reading me. Yes, I know I’m not good at explaining but the code its self-explanatory. Bye-Bye 🙂

Back to Top