I'm wondering how I can have my LinkContainer/NavItem link to an external URL. I tried:
<LinkContainer to="https://www.example.com">
<NavItem eventKey={1}>LinkedIn</NavItem>
</LinkContainer>
In which case I get the error:
A path must be pathname + search + hash only, not a full URL
I've also tried:
<NavItem eventKey={1} href="https://www.example.com"></NavItem>
The above yields no error, but doesn't do anything.
Using the Link from react-router commented by #yussan, you can add a target value and it should work. I'm using it to link external social networks, like this:
import { Link } from 'react-router'
<Link to="https://facebook.com/mypage" target="new">Facebook</Link>
I know its an old thread, but I faced this issue today and wanted to share the solution.
You'll probably be able to do something like this:
<Link to="https://www.example.com" target="new">
<NavItem eventKey={1}>LinkedIn</NavItem>
</Link>
Hope it helps,
that component is based on react-router Link https://www.npmjs.com/package/react-router , and only used to transition within website.
for example : /people /people/id
if you want create direct link to other website, you have to create own link component with a href.
Related
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/>
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>
I have a site.
http://example.com
On my site I have multiple languages which get appended to the url.
So the homepage becomes something such as
http://example.com/english
When the user navigates to the account section, it is a React single page app with React Router
http://example.com/english/account
On this account section, there are multiple tabs that load different templates
http://example.com/english/account/login
http://example.com/english/account/create-account
Now the 'english' part of the url could be any language (french, german, spanish). How would I set up my React routing to account for this dynamic part of the url? I ultimately want to do something with a wildcard effect, but this doesn't seem to work
<NavLink className="nav" to="/*/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
Adding explicit values such as
/english/account/login seems to work. But I'd rather not hardcode every language
You can use props.match.url for creating relative urls.
<NavLink className="nav" to={this.props.match.url}+"/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
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.
I have a page /hello where i have a link:
<a href="{{#url 'goodbye' }}{{/url}}">
that will redirect to /goodbye. But i want it to use an anchor too, something like /goodbye#message
I have tried doing:
<a href="{{#url 'goodbye' }}{{/url}}#message">
but when I click on it, it will redirect the page to /goodbye. It seems like Chaplin is deleting the anchor.
EDIT:
For the templates I'm using handlebars (with the chapling boilerplate), the {{#url}} helper generates correctly the link ( cf view-helper.js ). In the rendered page i see:
<a href="/goodbye#message">
but when i click on it, it just redirects me to /goodbye
Any idea?
Found a solution, I needed to stop the routing on the link. I just added the class noscript on the tag
<a href="{{#url 'goodbye' }}{{/url}}#message" class="noscript">
I couln't find a different way to do it. Hope this helps someone else
cf : skipRounting on Chaplin.Layout