In this task, we will implement routing in the Posts application using Nano Stores Router. We will create a router to manage the navigation between the home page and the post page. The home page will display a list of posts, and the post page will display a list of comments for a specific post.
Client-side routing allows us to navigate between different pages in a single-page application without reloading the entire page. In the Posts application, we want to navigate between the home page and the post page based on the URL path.
For example, the home page URL will be http://localhost:5173/, and the post page URL will be http://localhost:5173/posts/1, where 1 is the post ID. When the user navigates to the post page, we want to display the comments for the post with ID 1.
In a traditional server-rendered application, the server would handle the routing based on the URL path and return the appropriate HTML content. For example, when the user visits http://localhost:5173/posts/1, the server would fetch the comments for post with ID 1 from the database and render the page with the comments.
In a single-page application, the client-side routing library handles the routing based on the URL path and updates the view accordingly. When the user navigates to http://localhost:5173/posts/1, the client-side routing library will make an API request to fetch the comments for post with ID 1 and update the view to display the comments.
The term “single-page application” refers to a web application that loads a single HTML page and dynamically updates the content based on user interactions. In a single-page application, the entire application logic is loaded upfront, and subsequent interactions with the application do not require a full page reload.
React is a popular library for building single-page applications because it allows developers to create reusable components and manage the application state efficiently.
The Posts application follows the JAMstack architecture, which stands for JavaScript, APIs, and Markup. In the JAMstack architecture, the frontend client is built using JavaScript (React), the backend API server provides the data (posts and comments), and the markup (HTML) is generated dynamically on the client side.
The JAMstack architecture extends the SPA concept by allowing the frontend client to interact with the backend API server to fetch and update data. This separation of concerns between the frontend and backend enables faster page loads and better performance.
Nano Stores Router is a simple client-side routing library that allows you to define routes and navigate between them in a single-page application. Nano Stores Router uses Nano Stores to manage the routing state and provides a declarative API to define routes and handle navigation.
There are several client-side routing libraries available for React applications, such as React Router and TanStack Router. Nano Stores Router is a lightweight alternative that integrates seamlessly with Nano Stores and provides a minimalistic API for managing routing.
First, install the Nano Stores Router package using pnpm:
pnpm install @nanostores/routerNano Stores Router is a peer dependency of Nano Stores, so you don’t need to install it separately if you are already using Nano Stores in your application.
To handle routing in the Posts application, we need to define a base URL for the application. The base URL is the root URL of the application where the home page is located. In development, the base URL will be /, and in production, it can be a different URL.
Add the following code to the web/src/env.ts file:
export const BASE_URL: string = import.meta.env.BASE_URL || "/";Notice, if we want to use a different base URL in production, we can set the BASE_URL environment variable.
Next, create a router using Nano Stores Router to define the routes for the home page and the post page. The home page will display a list of posts, and the post page will display a list of comments for a specific post.
Create a new file web/src/lib/router.ts and add the following code:
import { BASE_URL } from "@/env";
import { createRouter } from "@nanostores/router";
export const $router = createRouter({
home: `${BASE_URL}`, // Home page with a list of posts
post: `${BASE_URL}posts/:postId`, // Post page with a list of comments
});In the router definition, we define two routes: home for the home page and post for the post page. The :postId parameter in the post route represents the ID of the post for which we want to display the comments.
App ComponentUpdate the App component to use the router and display the appropriate content based on the current route. If the route is the home page, display a list of posts. If the route is the post page, display a list of comments for the post.
import Feed from "@/components/layout/feed";
import Sidebar from "@/components/layout/sidebar";
import { Toaster } from "@/components/ui/toaster";
import { useStore } from "@nanostores/react"; // 👀 Look here
import { $router } from "@/lib/router"; // 👀 Look here
function App() {
const page = useStore($router); // 👀 Look here
if (!page) {
// 👀 Look here
return (
<div className="flex items-center justify-center min-h-dvh">
404 Not Found
</div>
);
}
return (
<div className="flex min-h-dvh">
<div className="flex-1 min-w-14">
<Sidebar />
</div>
<div className="w-full max-w-md mx-auto md:max-w-lg">
{/* 👇 Look here 👇 */}
{page.route === "home" && <Feed postId={null} />}
{page.route === "post" && <Feed postId={page.params.postId} />}
</div>
<div className="flex-1">{/* Placeholder for another sidebar */}</div>
<Toaster />
</div>
);
}
export default App;In the App component, we use the $router store to get the current route. If the route is the home page, we display a list of posts using the Feed component with postId set to null. If the route is the post page, we display a list of comments for the post using the Feed component with postId set to page.params.postId.
Currently, the Feed component does not handle the postId prop. We will update the Feed component in the next step to handle the postId prop and display the appropriate content.
Feed ComponentUpdate the Feed component to handle the postId prop and display the appropriate content based on the postId. If the postId is null, display a list of posts. If the postId is not null, display a list of comments for the post.
// web/src/components/layout/feed.tsx
import Header from "./header";
import { useStore } from "@nanostores/react";
import { $showAddPost, $showAddComment } from "@/lib/store";
import AddPost from "@/components/post/add-post";
import Posts from "@/components/post/posts";
import AddComment from "@/components/comment/add-comment";
import Comments from "@/components/comment/comments";
const Feed = ({ postId }: { postId: string | null }) => { // 👀 Look here
const showNewPostEditor = useStore($showAddPost);
const showNewCommentEditor = useStore($showAddComment);
if (!postId) {
return (
<div className="flex flex-col w-full min-h-screen border-x">
<Header />
{showNewPostEditor && <AddPost />}
<Posts />
</div>
);
}
// 👆 Look here 👇
return (
<div className="flex flex-col w-full min-h-screen border-x">
<Header />
{showNewCommentEditor && <AddComment postId={postId} />}
<Comments postId={postId} />
</div>
);
};
export default Feed;In the Feed component, we check if the postId is null. If the postId is null, we display a list of posts using the Posts component. If the postId is not null, we display a list of comments for the post with the specified postId using the Comments component.
Sidebar ComponentUpdate the Sidebar component to handle the navigation between the home page and the post page based on the current route. If the current route is the home page, display a button to add a new post. If the current route is the post page, display a button to add a new comment.
// web/src/components/layout/sidebar.tsx
import {
HomeIcon,
MagnifyingGlassIcon,
PlusCircledIcon,
} from "@radix-ui/react-icons";
import { Button } from "@/components/ui/button";
import { useStore } from "@nanostores/react";
import {
$showAddPost,
$showAddComment,
toggleAddPost,
toggleAddComment,
} from "@/lib/store";
import { $router } from "@/lib/router"; // 👀 Look here
const Sidebar = () => {
const page = useStore($router); // 👀 Look here
const showAddPost = useStore($showAddPost);
const showAddComment = useStore($showAddComment);
if (!page) return null; // 👀 Look here
return (
<div className="flex flex-col items-end p-2 space-y-2">
<Button aria-label={"Home"} variant="ghost" size="icon">
<HomeIcon className="w-5 h-5" />
</Button>
<Button aria-label={"Search"} variant="ghost" size="icon">
<MagnifyingGlassIcon className="w-5 h-5" />
</Button>
{page.route === "home" && !showAddPost && (
<Button
aria-label={"Make a Post"}
variant="default"
size="icon"
onClick={() => {
toggleAddPost();
}}
>
<PlusCircledIcon className="w-5 h-5" />
</Button>
)}
{/* 👆 Look here 👇 */}
{page.route === "post" && !showAddComment && (
<Button
aria-label={"Make a Comment"}
variant="destructive"
size="icon"
onClick={() => {
toggleAddComment();
}}
>
<PlusCircledIcon className="w-5 h-5" />
</Button>
)}
</div>
);
};
export default Sidebar;In the Sidebar component, we use the $router store to get the current route. If the current route is the home page, we display a button to add a new post using the toggleAddPost function. If the current route is the post page, we display a button to add a new comment using the toggleAddComment function.
If the current route is not defined, we return null to prevent rendering the sidebar.
Test the application to ensure that the routing works as expected. You should be able to navigate between the home page and the post page using the browser’s back and forward buttons.
http://localhost:5173/.http://localhost:5173/posts/1.http://localhost:5173/404.In this task, we implemented client-side routing in the Posts application using Nano Stores Router. We defined routes for the home page and the post page and updated the App, Feed, and Sidebar components to handle the routing state and display the appropriate content based on the current route.