| 0 | kirasiris | Website Tags:

Layout
My Login System Layout and Front End Layout

Make sure to read the new paragraphs all the way down, please!

My frustration

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 Admin= ({ match }) => (
  <Fragment>
    <Switch>
      <Route component={AdminRoutes} />
    </Switch>
  </Fragment>
);

const Auth= ({ match }) => (
  <Fragment>
    <Switch>
      <Route component={AuthRoutes} />
    </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;
const AdminRoutes = () => {
  return (
    <>
      <Navbar />
      <main>
        <Alert />
        <Switch>
          <Route exact path="/admin" component={AdminDashboard} />
          <Route exact path="/admin/posts" component={Posts} />
          <Route component={NotFound} />
        </Switch>
      </main>
      <Footer />
    </>
  );
};

export default AdminRoutes;
const AuthRoutes = () => {
  return (
    <main>
      <Switch>
        <Route exact path='/auth/login' component={Login} />
        <Route exact path='/auth/register' component={Register} />
        <Route exact path='/auth/recover' component={Recover} />
        <Route
          exact
          path='/auth/resetpassword/:userid/:resettoken'
          component={ResetPassword}
        />
        <Route component={NotFound} />
      </Switch>
    </main>
  );
};

export default AuthRoutes;

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 🙂

Update on 1/19/2020

For the love of God, make sure to update the routes according to the path you have created in your app.js. I just spent two hours wondering why in the world a third template implementation was just not working.

<Route exact path='/pages/:id' component={Page} />
<Route exact path='/admin/posts' component={Posts} />
<Route exact path='/auth/recover' component={Recover} />

The first line makes reference to the PublicRoutes since those routes start with a simple / , while the admin routes start with the /admin and the auth one with /auth

Leave a Reply

Back to Top