Create a new React app:
deno run -A -r https://alephjs.org/init.ts --template=react
In Aleph.js, a page is a
React Component exported
as default from a .jsx
or .tsx
file in the routes
directory.
Each page is associated with a route based on its file name.
Example: If you create routes/about.tsx
and it exports a React component
like below, it will be accessible at /about
.
export default function About() {
return <h1>About Me</h1>;
}
To learn more about routing, check out the Routing documentation.
Aleph.js provides a Link
component to move between pages without refresh whole
page, similarly to a SPA (single-page application).
import { Link } from "aleph/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/blog/hello-world">Hello World</Link>
</nav>
);
}
In the example above we have three links, each one maps a path (to
) to the
specified page:
/
→ pages/index.tsx
/about
→ pages/about.tsx
/blog/hello-world
→ pages/blog/$slug.tsx
Aleph.js also provides a NavLink
component that will add active class/style
when the specific page is activated. You can add the active class via
activeClassName
or add active style using activeStyle
.
import { NavLink } from "aleph/react";
export default function Nav() {
return (
<nav>
<NavLink to="/">Home</NavLink>
<NavLink activeClassName="active" to="/about">About</NavLink>
<NavLink activeStyle={{ color: "red" }} to="/contact">
Contact
</NavLink>
</nav>
);
}