getElementById() doesn't work when entering by react-router's <Link> - javascript

I created a simple react app with react-router(v5.) There are footers with current year in every page.
const footerYear = document.getElementById('footerThisYear');
if (footerYear) {
footerYear.innerHTML = new Date().getFullYear();
}
The problem is the snippet above doesn't work in child pages entering through react-router's <Link>. It works when entering the complete urls.
Preview:
https://stackblitz.com/edit/react-mqjws7?file=index.js
Child page example url:
https://react-mqjws7.stackblitz.io/page/a
Question: How to get this work in every page?
Thank you!

If you want to get that to work on every page, you're going to have to put that if statement in the Footer.js file. The easiest way to explain this is that your routes are working like this:
URL -> index.js -> Router -> Page
When entering the page using the direct URL, this is the path it goes through since your Router component is located in index.js. When clicking on the Links on Home.js, since it originates from Home.js which is already in index.js, it's only going through
Router -> Page
As a result of this, the proper footer you want is not showing because the function to display it is located in index.js. To test this, you can place a console.log statement inside your if statement. It will not be called if you're navigating to your pages inside of Home.js.
Change Footer.js to a class and put the if statement in there and it should work correctly. Otherwise, you can also set the footer to conditionally render the year given a prop.

Related

Make JavaScript script load after render in a huge React.JS webapp

I'm having a problem with React.JS. On my index.html of my WebApp, I load "script.js", which is in charge of making several things interactive (menu, search button, ...).
However, in some Components I use an element that is initialized when I load "script.js".
So, this element is not initialized when loading "script.js" (because "script.js" is loaded before render).
Knowing that this is a big WebApp, and that it wouldn't be clean to add a line of code to append a tag each time in a componentDidMount() function, would you have an idea of how I could do it ?
Thanks in advance.
Thanks #robert and #Kunukn, I've "succeed" to code it.
In my "script.js", at the end of the file I set window.searchInit = r.Ani.formSearch
And in my Component's componentDidMount() function, I call window.searchInit('.toggle-search');
Not clean as expected... But it works !

Is it possible to load screen into Tabs using Vue-router?

I have a setup where I have a routes file and multiple routes setup e.g: localhost:8000/test & localhost:8000/test2
My goal is to have a final route for example localhost:8000/tabs where I use some sort of Tab import for example bootstrap or Vuetify to crease tabs for each route within the page.
For example: localhost:8000/tabs?=test&test2 would render a page where the components test and test2 are the tab items. (Components themselves Dynamically retrieved using the routes file?).
The main problem with routes I am facing is that it reloads the page/changes the URL of the page instead of staying within localhost:8000/tabs.
Thanks for any advice.
Yes, you can using the <router-view /> and child routes.
Read more here

React - Multi HTML Pages

I'm building an application using React. My problem is that I have multiple HTML pages and I want to open one of them when I click on a button. But when that HTML opens up, React does not render that page although. What should I do to resolve that?
I've already seen React Router but it seems like to be for the same HTML page. I want to open a different HTML page not to render on the same page at different times.
I tried to do this in the HTML I open when I click the button
<script src="../src/app.js"></script>
but it does nothing.
tl;dr - A button opens a new HTML page. How to make React render that page?
If you really need to do this, then you need to reformulate the question. You might need to add iframes of external static html files.
This is something that was answered here correctly, so I won't duplicate.
Render HTML inside a React app using iframe
Hope this helps!

Appending components like Instagram's image-component

I would like to understand the following concept instagram is using.
No matter your current location on the instagram website, whenever you click to open an image, this image-component appends to the body as a ReactPortal.
This means you're then viewing the rendered component of whatever it was you were looking at plus the image-component outside of the react-root.
The image-component appends to the current component for example at Route ../explore or ../profile/xy, yet changes the URL to ../i/:id
How is this possible?
I don't know Instagram that well, but I guess you mean something like what is discripted in the following link:
React Router - Modal Gallery
I hope it helps

How to maintain state of a layout in jade in node.js

My layout.jade looks like
doctype html
html
body
block menu
block pagecontent
and index.jade has the following code
extends layout
block menu
body
h1 #{menuData}
and somepage.jade has
extends layout
block pagecontent
h3 user demo page
Now the scenario is first time I will load the index page and from then for all the requests i need to change only the only the pagecontent block. Since on the first request i loaded all the menu. So for all the other requests i need to write something like
res.render('somepage')
then it should load the index page with menucontent and this page content. How to do this effectively ?
The idea is like in Asp.net we have a master page and content page. While redirecting we will redirect to child pages with the same loaded master page. I need similar approach.
UPDATE
As mentioned in the answer i can do that way, but say i have twenty pages. So while rendering every page i need to pass the layout with the menuData (may be stored in a variable). Thats fine. But still any other way to do that or is that the only fine way ?
I am very new to nodejs please help me on this.

Categories