Next.js routing from "pages/[...slug].js" not working - javascript

This is how my pages folder looks like:
pages
index.js
[...slug].js
I know that the problem lies for sure in the fact that I am using catch all routes directly in the pages folder, because I tried with a "pages/page/[...slug].js structure and everything works fine.
When navigating using the Link component from the index.js page to a [...slug].js page (e.g. /careers or /blog), everything works fine.
BUT when navigating from a [...slug].js page (e.g. /contact) to another similar page (e.g. /blog) only the URL changes correctly, but the content of the page stays the same, so there is no rerendering.
Note: Navigating from a [...slug].js page back to the root file (href="/") works.

TLDR:
When returning the set of props from your getStaticProps or getServerSideProps function, return a "key" prop and assign it a unique value, so that react is able to differentiate between the two pages that are served from the same dynamic path.
I found the solution to the "problem" in github issue from last year: https://github.com/vercel/next.js/issues/9992
You can find a clear solution reading through the issue I linked.

Make each page its own file within your pages folder. For example, you could have:
pages/
index.js
contact.js
careers.js
blog.js
Each file should export a default function that returns JSX.

Related

Why does going directly to the location of index.html in React nor work?

I have my website on the subdirectory /test and it only works when I go directly to that path from www.domain.com/test. If I go to domain.com/test, it redirects to domain.com/test/index.html and displays my error page. I am confused if this is an error within React routing or my .htaccess.

How to make a subpage unavailable for navigating...?

I've got the following structure:
pages/blog/[...slug].jsx
pages/blog/Create.jsx
The main problem is, I've got no idea how to make the "create" file unavailable for a browser navigation.
I need to open this "Create" page (Component) in my slug file. I know, I can create another directory and add files like that over there, but I don't find a such type of approach convenient.
Can I do something like this in the nextjs context?
Make a seperate folder other than pages ,like example components folder
-pages
->blog
->[slug].jsx
-components
->Create.jsx
Now u can import Create.jsx in your [slug].jsx file.

Error page does not work in production for Sapper export

Basically not existing routes get catched when using the dev command and the error / 404 page gets displayed. But when using export and uploading the generated files to a webserver this does not work. Instead, the index page is displayed, but none of the logic works, like clicking on another link for navigation.
I had a catch all slug before in the code, but removed and deleted all the files that were generated by the export command, to make sure that it is removed. Could this be the issue? How would the slugs file look like?
When using sapper export the script will start from your index page and visit (and render) all pages reachable by links on the page. This way you have a static version of your website that you upload to your hosting. It replaces the server side rendering sapper normally does, but just for the first page the user visits, all the rest will start work as normal.
Since a 404 page is shown when the user goes somewhere that does not exist you will (usually) not have a link there and therefore the script will not render that page.
In order to tell sapper to also crawl that page you have to add it as an entry point
In package.json
"export": "sapper export --entry "/ /404""
This extra paramater will tell the script to start at / (the main index file) and do the entire process again, starting at /404 (which shouldn't exist and thus throw your error page)

How do I add another page in an angular-cli project?

Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.
I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.

Javascript is unable to resolve correct path of image when a page is requested using URL Routing in ASP.Net

In my ASP.Net project, I have implemented URL Routing. So even if my page is in the root directory, I am accessing it using URL routing as given below:
My actual Page is projectpage.aspx, which is in the root directory. I have registered its route as project/{projectname}/{cityname}/{projectid}.
There is another javascript which is included in this page. In this javascript, there is a code to access images in "resources" folder which is done by simply resources/{imagename}, but when I do View Source of the page, the path is shown like project/{projectname}/{cityname}/{projectid}/resources/{imagename}. But the "resources" folder is also in the root folder.
I also tried using "~/" before resources folder, but same thing happens.
Please let me know in case anyone has a solution to this problem.
Thanks & Regards,
Munjal
it think you should try /resources/{imagename}

Categories

Resources