toomuchdesign/next-use-contextual-routing

DEPRECATED - Generate Next.js contextual routing / modal routes paths

next-use-contextual-routing's Issues

New in Next.js: Parallel Routes and Interception

Thank you so much for this library. You might enjoy the new features we'd added to Next.js 🙏 Open to feedback.

https://nextjs.org/blog/next-13-3#parallel-routes-and-interception

Scroll behaviour on Safari

🐛 Bug Report

I have faced an issue related to scroll behaviour on Safari (14.1 version). When i use to

const openModal = () => router.push(makeContextualHref({ pathName: SAMPLE }), SAMPLE, { shallow: true })

for open modal, then scroll is not working on Safari.

To Reproduce

Steps to reproduce the behavior:

Expected behavior

Scroll is working properly on Safari.

SyntaxError: Cannot use import statement outside a module

Hello guys, since I updated to Next 13.2.4 and next-use-contextual-routing from 2.3.0 to 3.0.0, I am getting this error every time I want to import the package import { useContextualRouting } from 'next-use-contextual-routing';

/node_modules/next-use-contextual-routing/dist/index.js:1
import { useCallback } from 'react';
SyntaxError: Cannot use import statement outside a module

packages.json

"dependencies": {
    "@headlessui/react": "^1.7.13",
    "@heroicons/react": "^2.0.16",
    "@next/font": "13.1.1",
    "@react-oauth/google": "^0.5.1",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "axios": "^1.3.2",
    "eslint": "8.31.0",
    "eslint-config-next": "13.1.1",
    "js-cookie": "^3.0.1",
    "next": "13.2.4",
    "next-pwa": "^5.6.0",
    "next-use-contextual-routing": "^3.0.0",
    "nprogress": "^0.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.8.0",
    "react-intersection-observer": "^9.4.1",
    "react-toastify": "^9.1.1",
    "react-twitter-embed": "^4.0.4",
    "react-web-share": "^2.0.2",
    "typescript": "4.9.4",
    "zustand": "^4.3.6"
  },
  "devDependencies": {
    "@tailwindcss/line-clamp": "^0.4.2",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4"
  }

Any help ?

Update page title for modal URL

🚀 Feature Proposal

I think, changing the page title based on the URL change will be good.

Can't install because nextjs version is too low

do

npm i next-use-contextual-routing

get this error:

npm ERR! Could not resolve dependency:
npm ERR! peer next@"^9.0.0 || ^10.0.0 || ^11.0.0" from [email protected]

NPM package version

💬 Questions and Help

The latest version on the NPM page is v2.3.0 but it looks as though there should be a v3.0.0 available based on the releases and the description of next@13 support in this repo's README.

Could you advise as to next steps?

Docs on using Next Router

🐛 Bug Report

Not really a bug, but the docs should say that we are importing useRouter from next/router rather than next/link

Nested Contextual Routing

I'm unsure if this should be a bug or a feature request, but I've been working on a project that could use nested contextual routes and I'm not sure the library supports it or, If I'm doing something wrong.

For example, lets imagine we're building a version of Pinterest. So a way of grouping different images into boards.

Imagine the scenario:
So you land on a user page. You click on on of the user boards and the modal changes from /user/some-user to boards/2. On this page you have a gallery of images.

At this point you can close this modal and you're back into the user page(user->board->ESC=user). However, if you instead of closing, you click on an image you expect that new page to load contextually too. So user -> board -> image. At this point, if you close, you should go back to the boards page and not to the user page. (user -> board -> image -> ESC = board). But on my specific case I'm back to the user user -> board -> image -> ESC = user).

Is it possible to have nested contextual routes that allow me to go from:
user -> board -> image, hit ESC and be back at board hit ESC and be back on user page?

Please re-active this repo

Hi author. First of all I am very appreciated to this repo. But please re-maintain this repo. it's still useful for pages/ dir, not just /app dir.

Is there a way to query the url in getStaticProps?

Normally you would query the url string like so:

const { id } = router.query

However, how do we access the id parameter with SSG?

export async function getStaticProps({ params }) {

const { id } = params.id

// fetch data...

does not seem to work

Thanks, and awesome library!

Is it Possible to Preserve the Parent Page With This Library?

💬 Questions and Help

If you look at https://toomuchdesign.github.io/next-use-contextual-routing/ you'll see that when you open (say) post #1, and then refresh the page, you lose the page "behind" post #1 (ie. the initial page).

I'm looking for a very similar effect, except I want to preserve the "behind page" on refreshes, so that the user sees the same page that they saw before they refreshed, afterward. It is it possible to use the library in this way, eg. by somehow providing the "before page" (or path) to useContextualRouting()?