@ecopages/react-router
Advanced tools
Client-side SPA router for EcoPages React applications. Enables single-page application navigation while preserving full SSR benefits.
bun add @ecopages/react-router
Add the router adapter to your eco.config.ts:
import { ConfigBuilder } from '@ecopages/core';
import { reactPlugin } from '@ecopages/react';
import { ecoRouter } from '@ecopages/react-router';
const config = await new ConfigBuilder()
.setRootDir(import.meta.dir)
.setIntegrations([reactPlugin({ router: ecoRouter() })])
.build();
export default config;
That's it! All pages now have SPA navigation enabled.
<a> tagsUse config.layout for persistent UI across navigations:
// src/layouts/base-layout.tsx
export const BaseLayout = ({ children }) => (
<html>
<body>
<header>My Site</header>
<main>{children}</main>
</body>
</html>
);
// src/pages/index.tsx
import { BaseLayout } from '../layouts/base-layout';
const HomePage = () => <h1>Welcome</h1>;
HomePage.config = { layout: BaseLayout };
export default HomePage;
// SPA navigation (intercepted)
<a href="/about">About</a>
// Force full reload
<a href="/external" data-eco-reload>External</a>
import { useRouter } from '@ecopages/react-router';
const MyComponent = () => {
const { navigate, isPending } = useRouter();
return (
<button onClick={() => navigate('/about')} disabled={isPending}>
Go to About
</button>
);
};
The router automatically supports the View Transitions API for smooth page transitions.
When a navigation occurs with View Transitions enabled:
The router uses a deferred promise mechanism to ensure React has fully finished rendering the new content before telling the browser to start the animation phase.
To animate elements between pages (e.g., a thumbnail becoming a hero image), use the data-view-transition attribute. Ensure the value is unique to the specific element being transitioned and matches on both pages.
// List Page (Source)
<img
src={post.image}
data-view-transition={`hero-${post.id}`}
/>
// Detail Page (Destination)
<img
src={post.image}
data-view-transition={`hero-${post.id}`}
/>
By default, the router applies a clean morph animation (disabling the default cross-fade ghosting). If you prefer the standard browser cross-fade, you can opt-out:
<div data-view-transition="my-hero" data-view-transition-animate="fade">
...
</div>
By default, the router provides a smooth cross-fade for the root content. You can customize this by overriding the default view transition CSS:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
}
The router uses an HTML-First navigation strategy to ensure consistency with Server-Side Rendering (SSR).
document.startViewTransition().ecoRouter()Creates a router adapter for the React plugin.
reactPlugin({ router: ecoRouter() });
useRouter()Hook for programmatic navigation.
const { navigate, isPending } = useRouter();
Links are not intercepted when:
target="_blank" or download attributedata-eco-reload attribute# or javascript:The router uses a pluggable adapter pattern:
interface ReactRouterAdapter {
name: string;
bundle: { importPath; outputName; externals };
importMapKey: string;
components: { router; pageContent };
getRouterProps(page, props): string;
}
This allows custom router implementations while keeping integration simple.
MIT
FAQs
Client-side SPA router for EcoPages React applications
The npm package @ecopages/react-router receives a total of 125 weekly downloads. As such, @ecopages/react-router popularity was classified as not popular.
We found that @ecopages/react-router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.
Research
/Security News
The North Korean malware loader hides in a Packagist-listed package and its GitHub branch to fetch and execute remote code in a likely Contagious Interview-style lure.
Security News
The Rust project is moving toward formal rules on LLM use in contributions after months of internal debate over maintainer burden, code quality, and contributor experience.