React Navbar With Built-In Routing | Superflows | by Hrushi M
In this video, I am going to show you how to implement a customizable react navbar that has built-in routing.
Documentation
https://superflows.dev/docs/building-...
Demo Projects For Current Tutorial
https://stackblitz.com/edit/react-ts-...
https://stackblitz.com/edit/react-ts-...
https://stackblitz.com/edit/react-ts-...
https://stackblitz.com/edit/react-ts-...
Previous Videos:
Install the Superflows Navbar: • How to Add a Navbar to Your React Pro...
Brand Info: • How to Add Brand Info to Your React N...
Customize the Menu: • How to Customize the Menu of your Rea...
Customize the Search Input: • How To Customize the Search Input Of ...
Customize the Sign In Button: • How To Customize the SignIn Button Of...
Insert User Profile Info: • How To Insert User Profile Info In Re...
Back Button: • How To Add Back Button To Your React ...
Notifications: • How To Add Notifications To Your Reac...
Announcement Banner: • How To Add an Announcement Banner To ...
Join Community
/ discord
More Tutorials
https://blog.superflows.dev/
Related Demo Projects
https://stackblitz.com/@superflows-de...
Step 1 - Spin a Fresh Create-React-App
Let us get started with some basic installations. Run the create-react-app script and get started with the basic boilerplate. Open the Code in any IDE of your choice, I am using Visual Studio.
Step 2 - Install Superflows
Install the themes and the building blocks packages.
Step 3 - Setup the Default Navbar
Open App.js and import SfNav, the Superflows navbar component at the top. And use it in the return function without specifying any props. The default navbar will render.
Step 4 - Enable Routing
Set the enableRouting prop to true to enable routing. Once you do that and go back to the browser, you will see a Page Not Found message. This is because you have enabled routing but you haven’t yet specified the home component.
Step 5 - Setup Home Routing
Let us start by setting up the routing to the home component. Quickly create a simple Home component and assign it to the homeMenu prop. You will now see that the home component gets loaded as the default component now.
Step 6 - Setup Routing On Main Menu
Create two more components, the About component and the Services component. The default navbar shows the default menu. Let us change that a little. Create a json array object of the menu and assign the components, which we just created, to their respective menus. Assign the json menu object to the menu prop. You will see that after pressing a menu, its respective component gets loaded. If a menu doesn’t have any component specified, the onMenuClicked callback is invoked.
Step 7 - Setup Routing On Profile Menu
Create two components, the MyProfile component and the Settings component. Enable the profile section by setting the showProfile prop to true and setting a profile picture to the profilePicture url. Then, create a json array object of the menu with the MyProfile and Settings components and assign it to the profileMenu prop, as shown.
Step 8 - Setup Routing On Notifications
Create two components, the NotificationList component and the NotificationDetails component. NotificationList component will be shown after the user presses the ViewAll button in the notification dropdown. NotificationDetails component will be shown after the user presses on any of the notifications in the dropdown.
To show the notification section, set the showNotification prop to true. Compose a json array object of the notifications as shown in the example and pass it to the notificationList prop.
Then pass the NotificationList component to the notificationListMenu prop and the NotificationDetails component to the notificationDetailsMenu prop as shown in the example. Then try clicking on the notifications or the view all button to see the routing in action.
One additional point to note, to access the notification id on the notification details page, use the useContext api, and get access to the args that have been passed down to the component, via the context api. How to do it is shown in the example.
Step 9 - Provide For Dynamic Navigation & Routing
Not all components can be made accessible by menus. Some components can be embedded deep into your application workflow and are loaded only after certain events. Essentially, navigation for these components is dynamic and would be mostly triggered by events.
To configure event-based routing, two things need to be done, as shown in the example:
Compose a json array object of such components and register it to the otherMenu prop, so that SfNav understands, which other components are possible candidates of routing
Acquire the SfNav context with the help of useContext hook and then use the navigateTo function to dynamically navigate to any component.
In the example below, we create two additional components Service1 and Service2 and navigate to them dynamically from the Services page.
Watch video React Navbar With Built-In Routing | Superflows | by Hrushi M online without registration, duration hours minute second in high quality. This video was added by user Superflows 22 December 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 177 once and liked it 1 people.