Develop Reference

Nextjs routing issue: superior param is weird

I have a project using nextjs v12
I have 2 routes that are overlapping in a weird way.
/:academy/:course
/questions/:id
when I load /questions/1 it works as expected
when I load /mit/math it works as expected
The issue:
when I redirect from /questions/1 to /questions/2,
it loads, you guessed it, the other route! (/:academy/:course)
and more, when I refresh the page (after the redirect) it will load the /questions/:id!!!
I tried
check for miss spelling
make /questions/:id -> /aquestions/:id
so, do you know a way to solve this issue?
thanks.
Solved
it was /q/:id and I renamed it to /q/:id.
and because it's with ssr (I think), I had to clear the cache and restart the project.

This should not happen, because according to official nextJS docs,
Predefined routes take precedence over dynamic routes and dynamic
routes over catch-all routes.
https://nextjs.org/docs/routing/dynamic-routes
In this case, it looks like we are trying to use 2 partial dynamic path, that is why nextJS is not able to figure out the correct path, you can add rewrite rule to always send /questions/* paths to /questions/:id
https://nextjs.org/docs/api-reference/next.config.js/rewrites
Can you please share the code how you are redirecting, to help you better?

Rederict path, specified in 'next.config.js' file for one project, has been implemented for all projects

A bit of an odd one...
I've specified a redirect path for the root index page for one of my projects. It worked no problem and redirected me to the correct path, but now it redirects me to that same path for the root index page for all of my other projects. (trying to visit localhost:3000 now redirects me to localhost:3000/ggp for all of my projects)
I've tried restarting servers, deleting the next.config.js file in the original project, commenting out the redirect key, overriding it with a different path in both the original project and in the other project but all to no avail.
This is the first time I've created a next.config.js file and obviously the first time using the redirect key. I was following the guidance in the docs (https://nextjs.org/docs/api-reference/next.config.js/redirects).
At first I thought it might be because I set permanent to true, but that would seem like a bit of a weird feature to make it global and when I run a different project in dev mode (next dev) and debug, everything works normally as it should. So I'm not sure if the value just got cached on first use or something.
Has anybody encountered this before / know a way of fixing it? I'd appreciate your help!
The original next.js.
module.exports = {
async redirects() {
return [
{
source: '/',
destination: '/ggp',
permanent: true,
},
]
},
}

Turns out the problem was that when you set the permanent key to true, it caches the redirect route in the browser (at least it does in Google Chrome), so that redirect route is used for all requests to that path, regardless of which project is active.
Clearing the browser cache and switching the permanent key to false, solves the issue for me (I just opened up the inspector, went to the network tab, right clicked in the network request table and selected "clear browser cache").
It seems like a weird feature to me, especially since it's use seems pretty ambiguous in the docs (although it may be mentioned somewhere that I haven't looked).
Anyway, lesson learned: Test the issue in another browser before tearing your hair out :')

React router V4 / V5 / V6 nested routing 404 net::ERR_ABORTED 404,

I have tested everything described below with both react router V4 and V5. In V4 the error is just 404, but in V5 it also includes net::ERR_ABORTED.
I am creating a React app with React router. I need to have a /test route and /test/:param1/:param2 route.
First route is OK, but when I created the second and navigated the browser to localhost:8080/test/something/something2 I received a blank page with error in the console saying that it failed to GET localhost:8080/test/something/index.js.
I am using webpack and webpack-dev-server. I then tested more:
Tried to put the second route inside the component of the first.
Tried simplifying the route to /test/:param1, but that didn't work either.
I then tried just a normal 1 level nested route /test/test2(no parameters) and still got the error in the title.
I have also configured a 404 page, however it is displayed only if the path is 1 level: /{something that does't exist}. If I navigate to /{something}/{something more} I get the same ERR_ABORTED.
For some unknown to me reason the browser tries to GET /test/index.js, which obviously doesn't exist.
I spent a day looking through articles, tutorials, and the react router documentation, but everywhere nested routes just work. In fact there is absolutely nothing about this error.
Edit1: After some more testing I've been able to narrow down the issue to just one question: How to configure react-router to always look for the bundle at {domain, localhost:port}/index.js?
Edit2: Tested it with the beta of V6 - same result.

Another is to check if you have in the Webpack config the following:
output: {publicPath: '/'},
Took me some time.

After a few hours I finaly figured it out!! The mistake was so dumb. In my index.html file I required the bundle with <script src="./index.js"></script>. Simply removing the dot fixed the issue. If somebody has the same error, first check your index.html.

react-router v4 + electron - Does a timeline exist where they play nice together?

I'm trying to use react-router v4 inside an electron app.
Issue number one: electron loads the initial page as file:///path/to/project/index.html, react-router expects the initial page to be "/" and as such doesn't match it and renders nothing.
My initial solution to this was this little nasty piece of code to redirect to the right page on app start:
{window.location.href.endsWith('index.html') && <Redirect to="/" />}
This works perfectly until webpack-dev-server pops up to ruin the party - as soon as I make a single change to the code and webpack reloads the page to show the latest changes, it tries to load the new file:/// route, erroring out and showing a blank page.
Anyone ever dealt with this? Are we just doomed to an endless loop of manual electron restarting?

In case anyone ever stumbles upon this, I "solved" the issue using MemoryRouter instead.

This problem is due to the wrong link between the build folder & entry point of your app...
Try the following ways, it will definitely solve your error
DON’T USE in this way
win.loadURL(isDev ? ‘http://localhost:3000' : file://${path.join(__dirname, ‘../build/index.html’)});
USE IN THIS WAY
win.loadURL(isDev ? ‘http://localhost:3000' : file://${__dirname}/../build/index.html);
and if you use React router you must replace BrowserRouter with HashRouter
If your error is solved, Please upvote my answer, hehe

Backbone Router root duplicates in the url

I've just finished developing my first Backbone app and I detected a small quirk with the Router which I don't seem to be able to fix.
My routes look like this:
routes: {
'': 'index',
'jobs/:id': 'viewJob',
'*default': 'notFound'
}
It works fine when serving the app from the server root, but it doesn't when I serve it from a subfolder. In that case I always get the default route.
I though adding the root param to the backbone history would do the trick so I added it like this:
Backbone.history.start({ pushState: true, root: '/subdir/' });
With this the app seems to load as expected but the Router is automatically adding the root to all the routes and it ends up being duplicated, so when I first visit the website:
http://mysite.com/subdir/
It loads the app and changes it to this:
http://mysite.com/subdir/subdir/
This makes the app to break when reloading the page or using the browser back button as that route doesn't really exist.
What would be the approach to avoid this? I don't want to hardcode the folder name in the routes as it might change or be served from the root.
UPDATE: I've just realized I was adding the duplicated folder name myself using router.navigate somewhere in my code. I just removed it and everything works as expected.

Just a small guess.. do you really want pushState turned on? This can cause problems on reload if the server is not setup to serve out of the new directory.