Now that I got my button to route to another component, I'm trying to make it render on a blank page. I thought adding target="_blank" to Link to="/blog" would make the component render on a new blank page but the component renders on the same page making my App.js cluttered. My CodeSandbox
Related
I have a header menu in my web page, inside the menu I have sections and subsections, one of the subsections will jump me to the position where the section is in the home page
for this I am using react router hash
import { HashLink as Link } from 'react-router-hash-link';
<Link to="/#map-section">
Section of home page
</Link>
this works if I am in the current page where the section I want to jump is, but it doesnt work at all when I am in another page and I wanna go to the main page and then jumping to the section.
I am guessing that component where the section is has not finished loading when i am trying to get there. Is there any way to manage this?
Please check below codesandbox.
It worked.
https://codesandbox.io/s/zen-swartz-59rj4
in html file i can make
<h1> the following page is google page </h1>
<pageElement linkForThePage='google.com'/>
how can I open any page inside the marginal page without leaving it? is there an HTML element that do this.
in case you did not understand what I mean: I want to open other pages like google authentication as a component (like opop up but I don't want to make a popup) in my original page.
UPDATE: I had come up with the iframe approach to load a website within the component. However, all the websites with authentication pages like google, facebook will block framing.
You need to use iframe within your Component That you wanted to link to.
const MyWebSite = ({siteName})=>{
return(
<iframe src={siteName} title="My Site Name">
</iframe>
)
}
Then from Parent Component Use this Component.
<MyWebsite siteName="https://aperfectplate.co/" />
Update: While the above website will work and food app is loaded.
Codesandbox: https://codesandbox.io/s/iframe-example-nihyh?file=/src/App.js
But authentication websites will not be loaded within the component with the above approach. For example if you try below code. It wouldn't load google.com.
<MyWebsite siteName="https://www.google.com/" />
That's what I feel can be done. You may improve it later using React Router. You can make it behave like a link also. This idea could be used to build on top of :)
My app structure like this
<app-header>
<router-outlet>
<app-footer>
But here the problem is when I go to some page since angular loads footer component first before loading the router outlet
My router outlet is coming over the footer component which hides the footer
What am I doing wrong here ?
How to load all the components perfectly without occuring any html , css issues
How is the page in the Angular2 is rendered? Does it render all the DOM elements that might be used at the page, for example pop-up, dialog? Or does it render after the element is being invoked?
For angular 2 when you spin up a server it loads all the html templates lazily. The index.html page is the entry point and by default the app-root directive is loaded first. If you have say another component featureA and featureB that are triggered by clicking a button or some other UI element those aren't loaded until you actually click on it.
http://www.silverbladesolutions.com
If I click on any link on the navbar from the home page, LOADING is shown before all the page content. Sme thing happens on links from the footer. If I reload the page, everything works fine. This does not happen with links other than from the index.html.
EDIT: Page code = http://pastebin.com/jeiqqJry
So I found the location of the code that contains the 'loading' section in the html.
When I first click the about button, it takes me to the page, and in the body tag of the page's html, there is this div:
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default ui-loader-fakefix" style="top: 212.5px;"><span class="ui-icon ui-icon-loading"></span><h1>
loading
</h1></div>
When I refresh the page, that div disappears and leaves only the rest of the body. There is something happening when you click on that about link for the first time, it opens this div along with the rest.
Also another thing I noticed is that on the first click, the class of the entire html page goes to the class 'ui-mobile'. Is this supposed to happen? I think something weird is happening when you first click the link, because when I refresh, that class disappears as well. Is there an external js script that might be affecting the html?
What's the html of the actual 'about.html' file look like?
NVM found it. It was some mobile UI thing added from an old version of jquery mobile that we had. updating all the jquery fixed it!