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

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.

Related

Whats is the difference between index.js and _app.js in NextJs?

Could someone explain to me what is the difference between index.js file and _app.js? In the Next tutorial it says to change the index.js but what is rendered for me is _app.js.
_app.js will contain your whole app, meaning this will be rendered in any page of the project. Eg. if you add a <div>hello world</div> in this file, you will see the Hello World on each and every page of your website. More reading here.
index.js will only be rendered if you access / path of your website. You will use index files whenever you create a new page, for example you want an about page, you will have an about folder containing an index.js, all of this contained in the pages folder. More reading here .

accessing static html css and javascript inside a react app

I have my react app directory structure like this.
I am using react-router to display some tabs in my app and in one of the tabs, I want to display static HTML /CSS and Javascript contents in one of my tab.
My src/main folder contains the following folders:
js folder with all react app-related JS components
resources/static folder with images folder and one random index.html file which is not used.
Approach 1:
I am wondering if I can put my static HTML /CSS and Javascript contents inside the resources/static folder or should I create a webapp folder and put it in there, and after putting it there, would I be able to access the contents inside my tab using Iframe?
Approach 2:
The other way which has worked for me is the following:
I put the static html,css and javascript in a folder(ProjectExternal) inside webapps folder of tomcat. And then access it like this from my react tab:
<Iframe
url="https://mycurrentserver/ProjectExternal/index.html"
width='100%'
//height='500%'
height='830px'
allowFullScreen
/>
If I can get it through Approach 1 then I won't have to go through the time-consuming process of Approach 2 of putting files and folders somewhere else and accessing it from there

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

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.

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