How create a link from a parameter in React component? - reactjs

In a React.js I have a variable that contains a url.
let linkab = 'www.example.com/about';
<Router><Link to={linkab}>About</Link></Router>
but this code adds localhost to the address on the link like this:
http://localhost:1985/www.example.com/about
how can I get the real link without localhost in the beginning?

Actually we use Link when we want to navigate to a different route in the same application.
But since you need want to navigate the user outside of your application anchor tag would be the best suitable one
<a href={linkab}>About</a>
Also, if you the provided url is not having any http or https protocol then by default it'll be considered as relative path. Hence, the provided url will be appended to the current browser address/url. So, in your case if you provide something like below then it will redirect to that url on click.
let linkab = 'http://www.example.com/about';
or
let linkab = 'https://www.example.com/about';

Just use regular <a target="_blank" href={linkab}>To external site</a> tag, no need to use Link. And add https:// before url.

Related

Interpolation in angularjs

{{link}}
"Link" is the url gotten from the database. On click of link, I want the browser to open the link. The problem is that: lets assume the name of my website is "stackoverflow.com". If the link is "facebook.com", on click of this link, it will open "stackoverflow.com/facebook.com" which is not what I want. But if the link is "https://facebook.com", it will open "facebook.com", exactly what I want. The question is that: how can I make the browser open "facebook.com" whether the link is "facebook.com" or "https://facebook.com"
This is the default behaviour of browsers, when you are not specifying an absolute path (the one that is without http:// prefix) it considered as a relative path, therefore it navigates relative to the current domain.
You can attach the http:// prefix on the client side.
Side note, it is better to use the ng-href directive that prevents from none interpolated urls to active.
<a ng-href="http://{{link}}" target="_blank">{{link}}</a>
You may use something like this :
<a ng-href={{link}} target="_blank">{{link}}<a>
And in your AngularJs controller you may apply a validation check like this :
if( link doesn't have http://){
link = 'http://' + link;
}
This way your link will always starts with http://

angular automatically removes parameters form url

In my application i am passing parameters for controller and read it using javascript as below.
localhost:8080/app/conroller#parameter=value
now problem is if i open my conroller in url and than append #parameter=value than only it works.
but i want to put whole link in anchor tag.
and when i click outside application than it automatically reroute localhost:8080/app/conroller and don't accept parameters.Although when opening that url if i apped #parameter=value* part than it works perfect.
i am using html5mode = true.
i search lots of document but didnt find right solution for this.
Not exactly sure if I get what you are asking but I think this is what you are getting at:
href="/app/conroller#parameter=value" target="_self"
Try adding the target self.
If that doesn't work you could try setting a base url <base href="/"></base>
You could try using ? for the query parameter instead of the #

Generating random URL in AngularJS

I wish to see if it is possible to generate a random link each time an admin visits the admin page.
for example: instead of having: "".com/admin, there would be "".com/a93k, "".com/9dik. The page stays the same but just so the end-user can't access the page from the address bar.
Thanks as I am new and do not know how I can implement this.
In .config of your app put something like
window.adminHash = Math.random().toString(36).substring(2,6);
In your routing
url: '/' + window.adminHash
Then you can use "window.adminHash" if you want to redirect to your route, which will change every time you refresh the page
You can add www.test-example.com/admin/{provide some ID}
And If there isn't ID provide discard that URL, if it is provided you can make discrimination.

I have created one button. I want to redirect to another page by clicking on it in backbone. How can i do that?

I have created one button. I want to redirect to another page by clicking on it in backbone. How can i do that?
I tried following code but it does not work:
router.navigate("/file:///code/order/table.html",true);
Using JavaScript:
window.location.href = 'file:///code/order/table.html';
But I would suggest to use relative path and simple anchor tag:
Table
the backbone router usage is wrong here. from the doc router.navigate(fragment, [options]) this is the function usage, the 1st argument should be fragment, which is registered via the router.routes.
if you would like to navigate to the other file, you may consider the window.location.href

AngularJS - How can I do a redirect with a full page load?

I want to do a redirect that does a full page reload so that the cookies from my web server are refreshed when the page loads. window.location = "/#/Next" and window.location.href = "/#/Next" don't work, they do an Angular route which does not hit the server.
What is the correct way to make a full server request within an Angular controller?
For <a> tags:
You need to stick target="_self" on your <a> tag
There are three cases where AngularJS will perform a full page reload:
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Using javascript:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API: $window.location.href.
See:
https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/service/$location
We had the same issue, working from JS code (i.e. not from HTML anchor). This is how we solved that:
If needed, virtually alter current URL through $location service. This might be useful if your destination is just a variation on the current URL, so that you can take advantage of $location helper methods. E.g. we ran $location.search(..., ...) to just change value of a querystring paramater.
Build up the new destination URL, using current $location.url() if needed. In order to work, this new one had to include everything after schema, domain and port. So e.g. if you want to move to:
http://yourdomain.example/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en
then you should set URL as in:
var destinationUrl = '/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en';
(with the leading '/' as well).
Assign new destination URL at low-level: $window.location.href = destinationUrl;
Force reload, still at low-level: $window.location.reload();
After searching and giving hit and trial session I am able to solove it by first specifying url like
$window.location.href = '/#/home/stats';
then reload
$window.location.reload();
I had the same issue. When I use window.location, $window.location or even <a href="..." target="_self"> the route does not refresh the page. So the cached services are used which is not what I want in my app. I resolved it by adding window.location.reload() after window.location to force the page to reload after routing. This method seems to load the page twice though. Might be a dirty trick, but it does the work. This is how I have it now:
$scope.openPage = function (pageName) {
window.location = '#/html/pages/' + pageName;
window.location.reload();
};
Try this
$window.location.href="#page-name";
$window.location.reload();

Resources