6 posts tagged with "React Router"

In the last post we created a property list from which users can select a property. In this post we continue by creating the property components/pages.

We previously created a landing page to administer or manage a property but we have left it blank to this point. In this post we will work on this page.

To this point we have built a lot of boilerplate code. That is, what we have built is code that really isn't specific to our application, it is code required by any application. We've built authentication and authorization, we've build our navigation, etc. Now we will start to work on the features that define this specific application.

We will continue from where we left off in the last post. We setup some basic navigation. In this post we will explore how to adjust navigation based on who is logged in - a regular user or and administrator.

Our menus will only be seen once a user has logged in. This is, if a user is not logged in they will have access to the login, register and forgot password screens and nothing else. We will create two different sets of routes depending on whether a user is logged in, and, if logged in, we will wrap our routes in a container that holds our top level navigation.

In this post we will start to put together our navigation strategy for the application. We will use various components from Semantic UI React to drive navigation, primarily menus, in coordination with React Router.

Semantic UI React Menu - https://react.semantic-ui.com/collections/menu/

Intro​

Our application is going to use React Router (https://github.com/ReactTraining/react-router). I think of React Router as the defacto standard for routing in React. It is currently at version 4 and is well used and respected by the React community.

The one other option I have looked at briefly is Reach Router (https://github.com/reach/router). To save time I am going to stick with React Router because I have some experience with it but Reach Router looks to have gained a bit of traction with key members of the React community and is another viable option.