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

npm

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

Yarn

 yarn add @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

npm

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

Yarn

yarn add @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

Name	Type	Default	Description
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.