Building a Blog With Reactjs And Laravel Admin Finish

Building a Blog With Reactjs And Laravel Part10: Admin Finish

In this article of this series i will finish the missing pieces of the React admin panel, those include breadcrumb, user profile, and dashboard home page.





The first thing i will fix is the breadcrumbs, remember that in previous lessons in that series we added a component for breadcrumb but that component is not dynamic in terms it should display links depending on current page. You can also use a custom npm package for breadcrumbs but for simplicity i modified the breadcrumb component to be dynamic.



In the above code i added a function prepareLinks() to return the links for the current page starting from the root link which is the dashboard. The function splits pathname sub property in location property by / then we loop through the resulting array and push it through the main array then we display it using <BreadcrumbItem/> component.


To enable the user to view his profile and update i added another component but first let’s modify the UsersController.php add this method:


Update routes/api.php

Update resources/js/admin/apis/User.js

Create a new directory profile/ inside of resources/js/admin/components/pages/ then add this component Profile.js


Add new route in resources/js/admin/Routes.js

Update resources/js/admin/components/partials/Header.js

Dashboard Home

I modified the dashboard component to include some links to other pages




Continue to part11: Website Start


Share this: