Link to is behaving in different manner in React - reactjs

props.repo.html-url is returning https://github.com/mojombo/docz-website
Problem is when I click on link it goes to this URL: http://localhost:3000/user/https://github.com/mojombo/docz-website
I want to redirect to first URL, why it is behaving like this?

Just use a simple anchor tag in this case, as you are linking an external page and not a route defined whitin your application.
<a href={props.repo.html-url} rel="external">
{props.repo.name}
</a>

Related

React.js - how to navigate to other domain?

I'm working on editor where user can set link to another website , for example stackoverflow.com. If user set this url to <a> element and then click on this link he will be navigated to http://myapp.com/stackoverflow.com but not to http://stackoverflow.com. I supposed that this is caused by changed default behavior of element.
How can i make this link external? if user will copy url from browser and paste he will paste http://stackoverflow.com and hence everything will works fine. But in case he manually enter stackoverflow.com nothing will work fine.
P.s. i also would like to make each element with attribute target="_blank" so, i assume that i can't navigate programatically
Any ideas?
Try setting the <a>'s href attribute to the full url, not just stackoverflow.com:
<a href="http://stackoverflow.com" />
Otherwise it's treated as a relative url.
Add a check to see whether your users input the url as stackoverflow.com, and if they do, change it to http://stackoverflow.com before setting the href attribute.
Didn't get your other question about programmatic navigation, but if you want a link to open in a new window/tab, use
<a href="http://stackoverflow.com" target="_blank" />

Set ng-href to current page

Is it possible to set ng-href to go to the current page?
eg:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u={{ window.location.href }}">facebook</a>
When the above runs, I keep getting:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u=" href="https://www.facebook.com/sharer/sharer.php?u=">facebook</a>
How are you setting value to window.location.href ? This sure doesn't look like native JS.
Here's a fiddle to help you out.
ng-href is part of AngularJS and there are a few ways to point to the same page. The method I use do not include the domain so the Angular Router will direct it as needed, like the following.
ng-href="/mySubDomain"
The Docs go into detail about this and give a nice code sample that shows you what you should expect from the route change.
https://docs.angularjs.org/api/ng/directive/ngHref

Angular-ui-router and href='#'

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>

redirect to page and anchor using ChaplinJs

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

Backbone.js: Single page application, routes and hrefs issue

It might sound a bit complicated.
This is SinglePage, pushState enabled application. I have a route, for configuration:
routes: {
'': 'dashboard',
'configure/sites/:id': 'configure',
'configure/sites/:id/:section': 'configureSection'
},
I'm using tbranyen/backbone-boilerplate way to navigate the urls. If I click a href from a dashboard a href="configure/sites/33, view rendered fine. In browser URL I can see, `localhost:12345/configure/sites/33'.
On configure view I have a menu, with some <a href= inside.
<ul class="nav configure-nav">
<li>
Overview
</li>
<li>
Configuration
</li>
The problem is, if I try to hit those links, the id goes away.
Expected href: http://localhost:12345/configure/sites/33/configuration
Actual href: http://localhost:12345/configure/sites/configuration
Could you please explain what happening and how to fix it?
I don't know if this will fix your problem but if you're making a single page app, you should put a hashbang after "localhost:12345/" or all those requests will get sent to the server.
This is due to the way relative and absolute links work. In your case the hrefs are relative to the closest "directory" in your path (to keep the file system analogy the :id part can be seen as a file).
If you add a trailing slash to your routes the overview and configuration links will be rooted properly.

Resources