Skip to content

Unitools | useRouter | By GeekyAnts

This document provides a comprehensive guide on configuring & using the official @unitools/router package. This configuration is tailored for Expo and Next.js applications, enabling seamless router usage across both frameworks.

For Next.js

Terminal window
npm i @unitools/router @unitools/router-next

Add module resolver to your next.config.js file.

next.config.js
module.exports = {
webpack(config) {
config.resolve.alias["@unitools/router"] = "@unitools/router-next";
return config;
},
};

For Expo

Terminal window
npm i @unitools/router @unitools/router-expo

Add module resolver to your babel.config.js file.

const path = require("path");
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
alias: {
"@unitools/router": "@unitools/router-expo",
},
},
],
],
};
};

Usage

import useRouter from "@unitools/router";
export default function Home() {
const router = useRouter();
return (
<View>
<Pressable
onPress={() => {
router.push("/about");
}}
>
<Text>About</Text>
</Pressable>
</View>
);
i;
}

Props

NameTypeDefaultDescription
push(path: string) => void-Pushes a new entry onto the history stack.
replace(path: string) => void-Replaces the current entry on the history stack.
back() => void-Equivalent to go(-1).
navigate(path: string) => void-Navigate to a specific URL.