Linking and Navigation

CORE CONCEPTS

There are two ways to navigate between routes in Rasengan.js:

Using the <Link> Component
Using the useNavigate hook

This page will go through how to use each of these options, and dive deeper into how navigation works.

Using the Link Component

The <Link> component is a React component that allows you to navigate between routes in your application. It is the recommended way to navigate between routes in Rasengan.js.

Example 1: Basic usage

src/app/home.page.tsx

import React from "react";
import { PageComponent, Link } from "rasengan";
 
const Home: PageComponent = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/dashboard">Go to Dashboard</Link>
    </div>
  );
}
 
Home.path = "/";
Home.metadata = {
  title: "Home",
  description: "Home Page",
};
 
export default Home;

There are other option props available to <Link />, see the API Reference for more details.

Examples 2: Using dynamic routes

src/components/Posts.tsx

import { Link } from "rasengan";
 
type Props = {
  posts: {
    id: number;
    title: string;
  }[];
};
 
export default function PostList({ posts }: Props) {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <Link to={`/post/${post.id}`}>Read More</Link>
        </div>
      ))}
    </div>
  );
};

Checking active links

src/components/ActiveLink.tsx

import React from "react";
import { Link, useLocation } from "rasengan";
 
type Props = {
  to: string;
  children: React.ReactNode;
};
 
export default function ActiveLink({ to, children }: Props) {
  const { pathname } = useLocation();
 
  return (
    <Link to={to} className={`${pathname === to ? "active" : ""}`}>
      {children}
    </Link>
  );
}

Scrolling to an id

<Link to="/admin/dashboard#statistics">Statistics</Link>

useNavigate hook

The useNavigate hook is used to change the current route in your application. It returns a function that you can call to navigate to a different route.

Example 1: Basic usage

src/app/home.page.tsx

import React from "react";
import { PageComponent, useNavigate } from "rasengan";
 
const Home: PageComponent = () => {
  const navigate = useNavigate();
 
  return (
    <div>
      <h1>Home</h1>
      <button onClick={() => navigate("/dashboard")}>Go to Dashboard</button>
    </div>
  );
}
 
Home.path = "/";
Home.metadata = {
  title: "Home",
  description: "Home Page",
};
 
export default Home;

For a full list of useNavigate options, see the API reference on the documentation of React Router.

src/components/LogoutButton.tsx

import React from "react";
import { useNavigate } from "rasengan";
 
export default function LogoutButton() {
  const navigate = useNavigate();
 
  const logout = async () => {
    try {
      // Logout logic Here
      navigate("/sign-in");
    } catch (error) {
      console.error(error);
    }
  }
 
  return (
    <button onClick={logout}>Logout</button>
  )
}

File-Based Routing

Dynamic Routes

Discover Plus Ultra ✨

A stunning and well crafted Portfolio website to showcase your work in a nice way.

Using the Link Component

Example 1: Basic usage

Examples 2: Using dynamic routes

Checking active links

Scrolling to an id

useNavigate hook

Example 1: Basic usage

Example 2: Logout with navigation

On This Page

Discover Plus Ultra ✨