Right now I'm trying to make it so that when I click on the text on the navbar it'll scroll down to the section in nextjs. I have the following code:
<Link href="#About">About</Link>
<Link href="#Sponsors">Sponsors</Link>
<Link href="#FAQ">FAQ</Link>
This is the navbar, when I click about sponsors for example i want to go down to the page to sponsors
Where about, sponsors, and faq are sections on the page as you can see here:
So this is working but it OPENS A NEW TAB which I don't want. I want it to scroll down to where sponsors is.
Some information:
Sponsor
About
and FAQ are their own components that I want to scroll to
you need to have all your Sponsors, About, FAQ components in for example "home.jsx"
and they must have the id of "Sponsors", "About", "FAQ"
now you can use
<a href="#Sponsors"/>
<a href="#About"/>
<a href="#FAQ"/>
to make the page to scroll to the section you want.
but if you want to render each component in different url you cannot use this method and you must use nextjs <Link> to go to the other page like
http://localhost:3000/Sponsors
http://localhost:3000/Sponsors
http://localhost:3000/Sponsors
Related
I am working in SPA with React and React Router and I have configured my routes already. I have in the "HomePage" an icon to open the Menu, but when the user navigates into some option, a "backArrow" icon is used to navigate to the previous page with the:
<IconButton
onClick={ () => navigate( -1 ) }
>
<ArrowBack />
</IconButton >
So far so good. My issue is that I have one resource in the app where the user navigates to a folder in /public and then comes back to the app. I don't want the user to visit that resource clicking the ArrowBack, but only when clicking the specific button. Visiting that resource is done with:
<Button>
<Link href={ LinkToPublicResource } >GO</Link>
</Button>
Notice that the "Link" is not the one from React Router but from Material UI in order to format the style of the link.
How could I avoid that link to be included in History so the user does not comes back to it clicking in the BackArrow? Is it possible some workaround to ignore visits to this resource for React Router?
My issue is that the when the user is navigating through the menu a usual navigation would be:
1) / --> 2) /posts --> 3) /posts/post:id --> 4) ExternalResource
After visiting the ExternalResource, the user comes back to "3) post:id" where the BackArrow icon is found, and clicking it, which triggers the navigate(-1) goes again to the ExternalResource but I would like the user to go back to /posts.
I hope I have explained a little better the issue. Thanks.
So Currently I have my Button & Link set up in react like this
<NavLink to="/register">
<NavBtnLink>Register Now</NavBtnLink>
</NavLink>
My Link from React-Router-Dom is named as NavLink
Putting my Link outside of the button does not route to anything
If i set it up like this it works
<NavBtnLink>
<NavLink to="/register">Register Now</NavLink>
</NavBtnLink>
Cant seem to figure out why it wont work when placed outside so it covers the whole button when you click
to route to /register
Heres a screenshot as well
Code Screenshot
from page 1 I am trying to route to a specific section of page 2.
I tried to use the hash value in the Link component but it did not work
<Link to={ {pathname: `/page2`, hash: `#sectionID`}} >
I even used this package react-router-hash-link with no success.
I always end up at the top of page 2.
any help
Check This link for full explanation;
Hash link scroll functionality for React Router, and here is example that will scroll to the component when you open it: baz#section-three, another one baz#section-two
In my application I am using react router 3
For navigation menu i have used
<nav>
<NavItem> </NavItem>
</nav>
It is working fine on click of nav menu but when going back using browser back, the url changed but the active class does not applied.
I will try to explain how it should be done generally, not framework specific. you can implement the same in any framework after that
in order to make stateful navigation, You can take advantage of query parameters.
all you have to do on click of the nav you have to append some value to the query parameters which will identify its uniqueness.
and on the component initialization you have to read the query params and programmatically select that tab.(apply css class to it)
For example, you have:
url:somedomain.com/home -- this is where you have navigation
NavItem1 href="somedomain.com/home?nav=tab1"
NavItem2 href="somedomain.com/home?nav=tab2"
NavItem3 href="somedomain.com/home?nav=tab3"
when the component initializes , you have to read the query params if exists and give the appropriate class to the particular NavItem
I have a React component that is clickable as a whole, but also contains buttons inside.
So something like
<Link to={'/path1'}>
...
<Link to={'path2'} />
...
</Link>
This is the behaviour I want, but I get this warning:
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See SearchResult > Link > a > ... > Link > a.
How seriously should I take this and what would be the workaround?
Nesting anchor tags (which is what <Link /> transpiles to) is forbidden in HTML. Even if you get the desired result, it is only because your browser is clever and has its own work-arounds. However, that behavior cannot be guaranteed across all browsers and platforms.
How seriously should I take this?
As per the above, I'd say quite seriously.
What would be the workaround?
The following isn't a workaround, but what I consider to be the "proper" implementation.
I'd programatically implement the navigation for the wrapping element and use the <Link /> for the buttons. So something like:
navigate = () => {
//push "path1" to history
}
render() {
return(
<div onClick={this.navigate}>
<Link to="path2">Some button</Link>
<Link to="path3">Some button</Link>
</div>
);
}
For more info about programatically navigating in React Router see one of the links below:
For React Router v1-v3: Link
For React Router v4: Link
I think the best approach is something similar to what Chris said but without the need to make the navigation programmatically. Keep the default behaviour of the links and use CSS to make them appear nested. As far as the browser is concerned, the links will be siblings and not parent/child.
So basically:
set the surrounding div's position to relative.
no explicit position to the 'parent' link, and let it use the whole width/height
set the 'child' link's position to absolute, which will remove it from the normal flow and will allow you to put it anywhere inside the div. Events shouldn't conflict because the links are not nested.
EDIT: I know this answer comes years later, but I expect many people to come across this problem since it is a common UI pattern.