I'm using NextJs. I would like to create a link in my header section. This link should take the user to TestimonialsSection on the same page by scrolling.
<Link href={"#TestimonialsSection"}>
<a className={styles.Designation}>Mentor</a>
</Link>
This is the code I tried, but it didn't work. The URL changes though. Thanks in advance
In vanilla HTML you'd do something like this
My first section
My second section
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
In NextJS you'd so something similar. Instead of using the anchor tag for linking, you'd use the Link components.
<Link href="#first-section">My first section</Link>
<Link href="#second-section">My second section</Link>
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
This would work just fine.
However, if you want your starting URL to be www.my-site.com/#second-section, you would need to set the Link component's scroll prop to false.
Ex:
...
<Link href="#second-section" scroll={false}>My second section</Link>
...
Make sure your sections/divs ie the target elements have the ID attribute set to them properly without the # and the corresponding
anchor links have the # prefixed to ID name
Here's the official NextJS documentation https://nextjs.org/docs/api-reference/next/link
Hope this resolves your issue.
If it's just a static string you should remove the braces as ЖнецЪ says above.
If you're making a reusable component where you need to specify the ID from a parent, use a template string and keep the braces.
<Link href={`#${props.id}`}>
<a className={styles.Designation}>Mentor</a>
</Link>
Try to use Link tag and in URL add #some-link and then in Link tag href with href='#some-link'
www.google.com/#some-link
<Link href='#some-link'>
// code section
</Link>
Related
I am using code below to avoid " nested" JS error and keeping Link properties inside a react-bootstrap Dropdown.
<Dropdown.Item className="dropdown-item" as={Link} href={`/example`}>
Example
</Dropdown.Item>
Result is as follow on the DOM:
Example
Problem is: className="dropdown-item" has been ignored.
How could I get this result: Example while keeping the code "react-friendly"?
You can try to wrap it around.
<Link to={`/example`}><Dropdown.Item className="dropdown-item">
Example
</Dropdown.Item></Link>
you can use bsPrefix to override the bootstrap styling ...
Docs reference ...
A sample e.g. here in below link - see dropdown first item's bg color... Please fork it for reference
Can't see a way in V6 to dynamically add an external link without the router prepending the site URL. Just need to do something like this:
<a href={dynamicStrValue} target='_blank' rel='noreferrer'>Link</a>
What about:
<Link to={{ pathname:`https://example.com/${dynamicStrValue}`}} target="_blank">My link</Link>
Referring to their docs
<Link to> with a .. behaves differently from a normal when
the current URL ends with /. ignores the trailing slash, and
removes one URL segment for each ... But an value handles ..
differently when the current URL ends with / vs when it does not.
Your link must include the protocol to avoid RR prepending the site url.
I was having the same problem as you, when executing an external component using a plain anchor tag it was redirecting to the router, instead of opening a blank page.
The solution to my problem was simply removing the key param in the anchor tag as follows
<a key={item.key} href='{item.url}' target='_blank'> {item.title} <a/>
to
<a href='{item.url}' target='_blank'> {item.title} <a/>
Sorry to disturb, guys. I'm so new to react and react-router and I've been struggling for few days already.
Actually I am trying to pass some values before jumping to a new page (using Link attribute target="_blank") and in the new page, I want to use these values to communicate with the server and when the data from the server comes, the new page will load its content.
the route path is something like this
<Route path="/root/the_page" component={the_component} />
and the link will be like this:
<Link to="/root/the_page" target="_blank" />
What I have checked is this discussion about using a function to pass the value, but I really cannot re-produce it. As for the query-params, I cannot retrieve the query in this.props.location even I set the link as follows:
<Link to={{pathname:"/root/the_page", query: {the_key: the_value}}} target="_blank" />
Any advice will be helpful.
Thank you in advance!
I don't see any reason why you would want to use React-Router to navigate to an external page. React-Router is meant for navigation in single-page applications but opening a link with target="_blank" would mean leaving that single-page app and opening new window/tab.
As such, why not just use a regular anchor tag? That's perfectly viable for external navigation.
Click me
Obviously, your history object won't be carried over because you are opening a new window/tab - so you won't be able to go "back" or do any of that.
Check this codepen (click on users submenu item). The new window is opened with params.
<Link to={{pathname: "/users", query: { someParam: 'someValue' }}} target="_blank">Users</Link>
https://codepen.io/Kotuhan/pen/JOJzNY
Then, you can get your params from window.location.search string.
how do i put a class on <A> tag when the current ngroute matches the a tags href. I know there is ui-active in ui-router but I am using ngroute.
I made a github project that addresses your issues.
https://github.com/ionescuvictor/ngRoute-active-directive
<a route-active="active" href="/#/Test" ></a>
gets transformed into
<a class='active' href="/#/Test"></a>
I'm using angular-ui-router and have an issue with empty a tags, like href='#'. I'm using bootstrap, which makes extensive use of href='#' for dropdowns and such. The problem is if a user selects a dropdown item then the router interprets that as a state change, which in this case is to the home page.
Is there an easy way to stop this behavior without having to resort to changing all the href='#' to href=''.
Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it.
Or if you're currently using ui-sref in the anchor tag, you could actually use the href attribute instead to go to the route that the state is mapped to.
you can use this, so you can preserve the link and basically do nothing when its clicked
<a ui-sref="state" href="javascript:void(0);">Your link</a>
I use this:
<a href-void>Click me! I don't do anything, but i'm still a link!</a>