Routing for React

Context

  1. Styling and Theme Management
  2. Global Navigation
  3. Responsive Layout
  4. Forms and Input Validation
  5. Routing
  6. Configuration Management
  7. API Call and Activity Indicator (Spinner)
  8. Monitoring, Logging and Instrumentation
  9. Toast Notification
  10. Redux and Store Setup
  11. Google Maps with Polygons
  12. SEO — Search Engine Optimisation
  13. Running React App on .NET Stack
  14. Deploy React App to Azure App Service

1. Root Router

  • Toaster: Pops up at the very top, so it makes sense if we keep it at top.
  • Global Navigation: is always stick to the top, so again it makes sense to keep it there.
  • Content: comes next, is dynamic and it loads based on user demand.
  • Footer: Belongs to the bottom.
  • Spinner: or the activity indicator, comes and goes based on the user activity like toaster, and it could be at the bottom
import history from './common/history';

2. App Router (Nested)

2.1 Protected Routes

  • If the user is not authenticated and they want to access a ProtectedRoute, they should be redirected to the Login/SignUp page.
  • If the user is authenticated and their plan doesn’t cover the feature they want to access, they need to redirected to the Plans page to upgrade their plan.
  • Is the user authenticated to do that?
  • Is the user authorised to do that?

2.1.1 Is the user authenticated?

2.1.2 Is the user authorised?

  • Name
  • Date of Birth
  • Role
  • AllowedScopes

Pellerex Foundation: For Your Next Enterprise Software

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store