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
Related
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
I have a NextJS app with the folder structure:
- pages
- docs
- [slug]
- index
- [id]
- index
These pages are supposed to be dynamic based on the data that appear in the UI. Meaning a user can go to /docs/payments/introduction (where payments and introduction are dynamic pages too).
However everything works fine when the user is one level deep in the nesting eg (docs/payments), but when the user goes 2 level deep (eg docs/payments/introduction), all the links begin showing [slug] in their url. Let's say there's a link in the sidebar that's supposed to go to /docs/payments/faq it then starts showing /docs/[slug]/faq in the url.
Here's a screenshot of an example url
I have no idea how its happening.
You need to use [...slug].tsx to be able to use multiple slugs.
- pages
- docs
- [...slug].tsx
If you want more info, click here.
Are you sure you are using Links and router.pushes correctly? When using dynamic slugs, you should use as prop. Like this:
<Link as="/page/docs/getting-started/creating-an-account" to="/page/docs/[slug]/[id]">
<a>Link</a>
</Link>
or if you are using router, like this:
const router = useRouter();
router.push('/page/docs/[slug]/[id]', '/page/docs/getting-started/creating-an-account');
I'm used Next.js but i have an error with dynamic route.
In my application I use getStaticPaths, getStaticProps and this:
<Link
href={`/offers/[id]?id=${offer.id}`}
as={`/offers/${offer.id}`}
>
<a>{offer.title}</a>
</Link>
When I click on this link, I have no problem with the dynamic route to display my page.
But when I refresh the same page, I get this message:
When I looked for a solution the answer was that my Link did not have the right setting when clicked on.
But now I don't click on the link, I just refresh my page.
I use Next.js 10.0.7
Since Next.js 9.5.3 there's no longer the need to use as for dynamic routes. Instead you can directly use the value to interpolate in href.
<Link href={`/offers/${offer.id}`}>
<a>{offer.title}</a>
</Link>
Alternatively, you can also use a different Link syntax by passing a URL object to it.
<Link
href={{
pathname: '/offers/[id]',
query: { id: offer.id }
}}
>
<a>{offer.title}</a>
</Link>
I had a similar problem. But I've been working with translations on the website.
So when I change selected language on any page it works fine, but as soon as I change language on any of the [id] page (item, article, etc.) I got the same error as you have.
In my case the problem was inside router.push() method I've used.
So when I pass router.pathname it returns /articles/[id] literally.
But actually I needed to use router.asPath which returns the correct URL path, such as /articles/abc123-456zczxc-7890-blablabla.
Here is an example from NextJS docs:
pathname: String - Current route. That is the path of the page in /pages, the configured basePath or locale is not included.
asPath: String - The path (including the query) shown in the browser without the configured basePath or locale.
NextJS API Reference Link
I am using React Bootstrap NavLink to main navigation. What I'm trying to do is:
Allow opening in new tab with correct route (no checking if it should be left needed)
If user wants to change current tab page - check if it should be left (eg some changes on current page may not be saved)
My current version looks like this:
{paths && paths.map(path =>
<NavLink href={path} onSelect={this.handleOnSelect}>
{path}
</NavLink>
}
And works quite alright, but the problem starts when my url looks like domain.com/a/b. Let's assume I click on c, navLink creates route domain.com/a/c instead of domain.com/c. I tried using href={`/${path}`} and routing worked fine but it was ignoring onSelect.
Does anyone have an idea how this could be solved? Is that even possible to accomplish?
I'm trying to setup a single page react web application. My application only has one page with all the components places one after the other, so, the common react-router solution that lets you render only some part of the application doesn't work for me.
The intention is to have only one page (as large as it becomes) and the user can navigate between sections on it through a menu (or similar). Also, the site should recognize when someone types the URL like http://url.com/#section4, and scroll automatically to the requested section, marking the selected section on the menu as active.
Also, like a nice to have, it would be awesome if the URL can change depending on page scroll.
How can I achieve this?
I found this library that works in conjunction with the React Router's BrowserRouter, and allows to have a based anchor navigation, and also customize the scroll function were you can put offset or anything you wan to. Something like this:
<NavHashLink to="#anchor1" scroll={el => this.scroll(el)}>Anchor1</NavHashLink>
scroll (el) {
const offset = document.getElementById('element').offsetHeight
window.scrollTo({ top: el.offsetTop - offset, left: 0, behavior: 'smooth' })
}
You should either use HashRouter from react-router-dom package, or you can use a NavLink from the same package like this:
<NavLink>
to="/foo/#bar"
isActive={()=> window.location.pathname + window.location.hash === "/foo/#bar"}
</NavLink>