feat(useRouter): add back, showProgressBar option and dont show bar w…

…hen push in the same url

README.md

@@ -309,7 +309,19 @@ Replace your 'next/navigation' routers with this one. It's the same router, but
 ```jsx
 const router = useRouter();
 
+// With progress bar
 router.push('/about');
+router.back();
+
+// Without progress bar
+router.push(
+  '/about',
+  {},
+  {
+    showProgressBar: false,
+  },
+);
+router.back({ showProgressBar: false });
 ```
 
 ## Migrating from v1 to v2

demo/app-dir/package.json

@@ -15,6 +15,7 @@
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.1",
     "next": "13.4.1",
+    "next-nprogress-bar": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.0.4"

demo/app-dir/src/app/dashboard/page.tsx

@@ -1,9 +1,30 @@
+'use client';
+
 import Link from 'next/link';
+// import { useRouter } from 'next-nprogress-bar';
+import { useRouter } from '../../../../../dist';
 
 const Dashboard = () => {
+  const router = useRouter();
+
   return (
     <main>
       <Link href="/">Home</Link>
+
+      <button onClick={() => router.push('/dashboard')}>
+        Pushing same url have no effect
+      </button>
+
+      <button className="back" onClick={() => router.back()}>
+        Back
+      </button>
+
+      <button
+        className="back"
+        onClick={() => router.back({ showProgressBar: false })}
+      >
+        Back without progress bar
+      </button>
     </main>
   );
 };

demo/app-dir/src/app/globals.css

@@ -0,0 +1,47 @@
+main {
+ display: flex;
+ flex-direction: column;
+}
+
+button, a {
+  all: unset;
+  color: white;
+  padding: 7px 15px;
+  cursor: pointer;
+  border-radius: 5px;
+  width: fit-content;
+  margin-top: 5px;
+  position: relative;
+}
+
+button {
+  background-color: red;
+}
+
+button::after {
+  content: "router.push()";
+}
+
+button.back::after {
+  content: "router.back()" !important;
+}
+
+a::after {
+  content: "<Link>";
+}
+
+a.a::after {
+  content: "<a>";
+}
+
+a::after, button::after {
+  position: absolute;
+  color: black;
+  margin-left: 20px;
+  font-size: 10px;
+  bottom: 0;
+}
+
+a {
+  background-color: blue;
+}

demo/app-dir/src/app/layout.tsx

@@ -1,4 +1,5 @@
 import Providers from './providers';
+import './globals.css';
 
 export const metadata = {
   title: 'Create Next App',

demo/app-dir/src/app/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-// import { useRouter } from 'next/navigation';
+// import { useRouter } from 'next-nprogress-bar';
 import { useRouter } from '../../../../dist';
 
 export default function Home() {
@@ -13,14 +13,28 @@ export default function Home() {
       <Link href="/?test=param">Sallow</Link>
       <Link href="/dashboard">Dashboard</Link>
       <button onClick={() => router.push('/dashboard')}>Push Dashboard</button>
+      <button
+        onClick={() =>
+          router.push(
+            '/dashboard',
+            {},
+            {
+              showProgressBar: false,
+            },
+          )
+        }
+      >
+        Push Dashboard without progress bar
+      </button>
       <a
+        className="a"
         href="https://www.npmjs.com/package/next-nprogress-bar"
         target="_blank"
         rel="noopener noreferrer"
       >
         Link with target=`&quot;`_blank`&quot;` not affected
       </a>
-      <a>Link without href won&apos;t throw error</a>
+      <a className="a">Link without href won&apos;t throw error</a>
     </main>
   );
 }

demo/app-dir/src/app/providers.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+// import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
 import { AppProgressBar as ProgressBar } from '../../../../dist';
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
@@ -10,7 +11,7 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
         height="4px"
         color="#0A2FFF"
         options={{ showSpinner: true }}
-        shallowRouting
+        // shallowRouting
       />
     </>
   );