Blazor Server best practices about state management and routing

Question

I have one page on a Blazor Server app that has multiple child components and I could get some input about best practices about handling different routes, and state management for a somewhat complex page/component.

My page lookssimilar to the image below. Let's say I have the following components:

• SearchDirectory: That handles the search on the left and displays the profile on click
• ProfileHeaderComponent: Background image, profile picture, and button actions
• ProfileTabsComponent: Tabs for Profile, Calendar, Recognition, etc.
• ProfileComponent: Uses ProfileHeaderComponent and ProfileTabsComponent and then displays the data at the bottom

My question now is the following:

• When someone clicks on a tab, let's say "Calendar". I need to keep the Directory search visible, header and tabs, and Update the content section (where it shows profile data) only
• This new "state" should be also accesible from url. Let's say "/directory/profile/111/calendar"

Should I create a new component with the @page "" attribute. Let's say "ProfileCalendarComponent" and include all the other previous components? (SearchDirectory, ProfileHeader, ProfileTabs)

I feel loading every other component every time I click on a tab is unnecessary and could eventually make the app slower since I will need to make trips to the DB (if not cached) every time a want to update a small portion of the page.

Is that considered best practice? or should I create a ProfileCalendarComponent that only contains what's going in the content area?

I feel there should be an easier way to achieve this, meaning saving the state and allowing to get to that state by URL. Please advise

Answer 1

After a few days of trying different things I will post my solution:

1. DirectoryComponent: I can access by going to "/directory". This controller uses the SearchDirectoryComponent.
2. SearchDirectoryComponent: Contains the search bar and list of people in the directory
3. ProfileHeaderComponent: Same as described above, profile image, cover picture
4. ProfileTabsComponent: Contains tabs
5. ProfileComponent: Contains ONLY what I want to display in the content area. If I have another section for example "Calendar" I will create a CalendarComponent with just the calendar

To make the tabs work: Every time I click on a tab option. I fire an event to the parent component (DirectoryComponent), I set a variable in the parent component "string SelectedTab" and in the content area I have a switch statement that loads a different child component based on "SelectedTab"

How do I access a specific tab by URL?: This was actually quite simple. My DirectoryComponent (main component) has multiple routes defined (@page). For example:

@page "/directory"

@page "/directory/{Id:int}/{SelectedTab}"

This way if I want to go directly to the calendar I can have a link to "/directory/111/calendar" and the DirectoryCompontent will automatically fill out the SelectedTab parameter and load the right Child Component.

I am also cascading this parameter to the ProfileTabsComponent so I can mark the right tab as "active".

I wrapped the ProfileHeaderComponent, ProfileTabsComponent, and the switch in an if statement so it only displays if the Id parameter is set to a value. Otherwise I display a message saying "Select a person from the directory".

I feel pretty confident with this but I would still like to see what other people think.

I hope this helps other people as well.