Next.js Discord

Discord Forum

Change URL Without New HTTP Request

Unanswered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
I have a page that shows various "strategies". When the user selects a strategy, that strategy's details show on the page. The URL is /userview. I would like the URL to change to /userview/strategy/<id> when the user selects a strategy, and basically nothing else change from how it's behaving now. No new request, no page reload, no new code files, but the correct content shows up like it does now. Can I do that, or does changing the url from /userview to /userview/strategy/<id> require a different page (/pages/userview/strategy/[id].jsx)? Or can I continue to use /pages/userview/page.tsx?

30 Replies

Giant AngoraOP
Cool. What's the best way to read the path when the application starts in case a user has bookmarked a strategy or something?
B33fb0n3
when you have a dynamic route and are in a client component you can use [useParams](https://nextjs.org/docs/app/api-reference/functions/use-params) to get the dynamic route param. If you dont have a dynamic route or are not in a client component, provide more context
Giant AngoraOP
I think I don't have a Next.js dynamic route. I think I am using a client component. Are you asking for more context for yourself, or saying I should provide more context to next.js or something?
Giant AngoraOP
I believe I'm using the app router (I have no pages directory...)
@Giant Angora I believe I'm using the app router (I have no `pages` directory...)
B33fb0n3
How does your folder structure look like? Especially the route we are talking about
Giant AngoraOP
.
├── api
│   └── rainbow-definition
│       ├── apis
│       └── models
├── api-definitions
├── build
│   └── build
│       ├── cache
│       │   ├── swc
│       │   │   └── plugins
│       │   │       └── v7_linux_x86_64_0.102.1
│       │   └── webpack
│       │       ├── client-development
│       │       └── server-development
│       ├── server
│       │   ├── app
│       │   │   ├── favicon.ico
│       │   │   └── userview
│       │   └── vendor-chunks
│       ├── static
│       │   ├── chunks
│       │   │   └── app
│       │   │       └── userview
│       │   ├── css
│       │   │   └── app
│       │   ├── development
│       │   ├── media
│       │   └── webpack
│       │       └── app
│       └── types
│           └── app
│               └── userview
├── node_modules
├── public
│   └── animations
└── src
    ├── app
    │   ├── environment
    │   ├── logon
    │   ├── userview
    │   │   ├── accounts
    │   │   ├── strategies
    │   │   ├── strategyDetail
    │   │   └── subheader
    │   └── websocketPOC
    ├── components
    │   ├── header
    │   └── modal
    └── context
We're talking about /userview URL.
Does that answer the question?
B33fb0n3
│ │ ├── strategies
Looks like you don't have a dynamic route. You are using the app router. You can't get the dynamic param via useParams like I mentioned without a dynamic route. So either create a dynamic route or ... (lets think about the or if you dont want to do this)
Giant AngoraOP
I think a dynamic route means that my page will need to reload to go from /userview to /userview/strategies/<id>, right?
B33fb0n3
The pushState function will just push the new state of the url. There are no additional requests. So even if you have a dynamic route there wont be an additional network request.

The only thing that you might want to test is, if the useParams will have the correct dynamic value when you using the pushState function
Giant AngoraOP
Okay, I'll give that a shot!
B33fb0n3
When will you try it?
Giant AngoraOP
Right now my frontend isn't working at all because my REST server isn't set up right. After I get that fixed, I'll try it right away 😅
@Giant Angora Right now my frontend isn't working at all because my REST server isn't set up right. After I get that fixed, I'll try it right away 😅
B33fb0n3
Oh ok, this thread will auto close in less then 3 days. Do you think you will be able to get that fixed within 3 days?
Giant AngoraOP
Totally ,dude!
B33fb0n3
Alr, let me know when you tried it
Giant AngoraOP
Okay, I tried it.
The pushState works as expected, but when I try to go to that page directly, I think it's trying to load app/userview/strategy/1/page.tsx or something that doesn't exist.
B33fb0n3
Yes, that will be tried, because it’s a whole new route. Did you already looked at intercepting/parallel routes?

https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Giant AngoraOP
I guess this is what it means to use an "opinionated" framework...it feels like I don't have much control over routing.
Giant AngoraOP
@B33fb0n3 Thank you so much for your help! I'm going to investigate dynamic routes 🥲
I'm accustomed to React Router and this is very ... different.
B33fb0n3
In react router there are also dyanmic routes. And of course you can do all the same stuff that you can do in react, also with nextjs. So instead of beeing unable to create the functionality xY, you can create even better mechanics, because you can do way more stuff.

I wish could provide you a better solution for your use case but with the knowledge that you provided here I am unable to provide you a good solution. So either give us more context or continue your journey without a solution

Btw: you can also add searchParams via the pushstate, that can be read by „useSearchParams“. Like that you stay in the same route and keep the strategy on the next reloads
Giant AngoraOP
Thank you!
@Giant Angora Thank you!
B33fb0n3
Is your issue resolved like that?
Giant AngoraOP
Not yet. My colleague is using a query parameter now: /userview?strategyId=1. He's going to send it to me for code review. I'm going to tell him it's garbage, and we should use /userview/strategy/1 instead 🤷🏻‍♂️