Elegant
links

Link Navigation

The Universal Link Component (ULC) is a flexible and reusable module designed to handle URL routing, dynamic links, and deep linking in web applications. This component is framework-agnostic and can be integrated into various frontend frameworks like React, Angular, and Vue. It provides a unified approach to manage navigation, handle parameterized routes, and ensure proper handling of external and app-based links.

Features

Use Cases

Components & API

The Universal Link Component provides a set of APIs and functions for integrating links across different parts of the application. The core functionality typically includes:

The Link component is responsible for rendering anchor tags (<a>) and enabling internal routing, with the ability to support dynamic links.

Usage

Example (React):

import { Link } from 'react-router-dom'; // or a custom routing library

function MyComponent() {
  return (
    <div>
      <Link to="/profile/123">Go to Profile</Link>
    </div>
  );
}

Example (Vue):

<template>
  <div>
    <router-link :to="'/profile/' + userId">Go to Profile</router-link>
  </div>
</template>

Example (Angular):

<a [routerLink]="['/profile', userId]">Go to Profile</a>

2. useNavigate() / navigate()

This hook (or equivalent function in Angular/Vue) is used for programmatically navigating between routes. It allows you to perform navigation without relying on traditional <Link> components.

React Example (with useNavigate):

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();
  
  const goToProfile = () => {
    navigate('/profile/123');
  };

  return (
    <button onClick={goToProfile}>Go to Profile</button>
  );
}

Vue Example (with this.$router.push):

methods: {
  goToProfile() {
    this.$router.push('/profile/123');
  }
}

Angular Example (with Router):

import { Router } from '@angular/router';

constructor(private router: Router) {}

goToProfile() {
  this.router.navigate(['/profile', 123]);
}

3. useRouteParams()

This hook (or its equivalent in other frameworks) is used to access dynamic route parameters from the URL.

React Example (with useParams):

import { useParams } from 'react-router-dom';

function Profile() {
  const { userId } = useParams(); // Assuming route is '/profile/:userId'
  
  return <div>Profile of user {userId}</div>;
}

Vue Example (with this.$route.params):

computed: {
  userId() {
    return this.$route.params.userId;
  }
}

Angular Example (with ActivatedRoute):

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    const userId = params['userId']; // Assuming route is '/profile/:userId'
  });
}

Key Functionalities

1. Dynamic Routes

Dynamic routes allow for URLs with variable parameters. For instance, a user profile page might be accessed at /profile/:userId, where userId is dynamic.

2. Deep Linking

Deep linking refers to links that direct users to specific content or views within an application, even from an external link or mobile app.

For example, a deep link like myapp://profile/123 can be handled by the app to open a specific user profile page.

3. SEO-friendly URLs

The Universal Link Component should ensure that links are accessible and crawlable by search engines, including static routes and dynamically generated URLs. Use tools like React Helmet, Vue Meta, or Angular Meta to manage metadata for better SEO.

Error Handling

Handling broken or invalid links gracefully is essential for a good user experience.

Example (React - 404 Route):

<Route path="*" element={<NotFound />} />

Example (Vue - 404 Route):

const routes = [
  { path: '*', component: NotFound }
]

Example (Angular - 404 Route):

const routes: Routes = [
  { path: '**', component: NotFoundComponent }
];

Configuration and Customization

The Universal Link Component is highly configurable to adapt to different routing strategies and needs:

Example (Custom Route Handler):

<Link to={`/profile/${userId}`} onClick={customLinkHandler}>Go to Profile</Link>

References