I have a promo block, that contains several images and links. Some of them are leading to my site, some to external resources. Currently, i use this piece of code for this links.
<a {{ bindAttr href="link" }}><img {{ bindAttr src="image" }} /></a>
However, this actually reloads a page, and i don't want that in case i'm navigating inside my site. Also, it could mean breaking my app if we encounter some non-existent routes, in case of typos or whatever.
So, what i'm trying to do is to add an action, that checks if the route exists and then do a proper transitionTo, and if the route doesn't exist do some sort of default fallback, but i don't know how to make this check. Have anyone did something similar already?
P.S. I know that transitionTo could accept urls as a parameter, but Ember docs say
It is also possible to pass a URL (a string that starts with a /).
This is intended for testing and debugging purposes
and should rarely be used in production code.
And doesn't help with preventing transition if the route doesn't exist.
You could have a default route that would be a 'catch-all' which you would specify in your router as something like:
this.route('badRoute', {path: '/*pathname' });
at the bottom after you have declared all your routes. When none of your routes match, this will be matched and you can redirect or whatever when it transitions to that route.
Related
I am trying to make a simple form that slides to the right like this one used by DigitalOcean when you click on "Sign up using email": https://cloud.digitalocean.com/registrations/new.
The transition itself is pretty easy, what caught my attention is that they use 2 separate routes for this, the first one under /new and the other one under /email. These 2 seem to be separate pages and not just 2 different states to which a route is programmatically added, how can I do this in NextJS?
I believe the feature that you're looking for is shallow routing.
From the Docs:
Shallow routing allows you to change the URL without running data
fetching methods again, that includes getServerSideProps,
getStaticProps, and getInitialProps.
You'll receive the updated pathname and the query via the router
object (added by useRouter or withRouter), without losing state.
Note, however, that:
[s]hallow routing only works for URL changes in the current page.
See also:
next/router - router.push()
Dynamic Routes
This answer by #metaaa may also shed some light re implementation.
Best of luck and happy coding!
I'm implementing multi-language support in my app, and I guess this is the last thing that I would need in order to be able to change between languages without reloading the whole app/page. (I already have a solution with full page reload.)
For a simple example let's say this is how my router looks:
Router.map(function() {
this.route('search', { path: t('search') });
this.route('item', { path: `${t('item')}/:id`);
});
The t function would be getting the correct translation for the given strings in the currently active language.
The structure of the route hierarchy won't change, the only things that need to be updated are the path strings. Application state should be kept, of course.
I'm wondering whether this is possible to do.
I am not %100 sure about the correctness of what I wrote but Router.map is executed and resources with the definitions given within this method is transformed to a DSL instance and that is then passed to the actual router maintained by Ember.Router itself. In order to achieve what you want I believe what we need is dynamic modification to the router even if it is just the paths you need yo modify not the whole route structure.
If you look at the following github issue, Ember.js no more supports dynamically adding routes (hence no dynamic modification to the existing ones I believe). With all that said, I believe what you want is not possible without reloading the whole app (hence losing the application state).
In an Ember app I'm building, I have a hash-only link like so: Foo, on a page that isn't the root (i.e. localhost/bar). If I inspect the element in the console, the href property is localhost#foo, instead of localhost/bar#foo like it is on other sites. window.location.href return localhost/bar, so the browser definitely knows where it is.
What could be causing this discrepancy?
I'm not sure if hash links can work with client side routing right outside the box.
I think you could check out ember-href-to which should always generate correct url for you.
Something like
<a href={{concat (href-to "some-route") "#myhash"}}>
(concat helper is not a default Ember helper)
That should provide correct url, but making the anchor actually work, that's another problem. Switching to query-params would be much easier.
EDIT:
Apparently there's this addon as well: https://github.com/mike-north/ember-anchor
I am using hash-based navigation in my AngularJS app rooted at /.
If a user navigates to my app like this:
http://example.com/?foo
A moment after the page loads, something (possibly Angular) is causing the address bar to look different than I expected.
What I saw:
http://example.com/?foo#/?foo
What I expected to see:
http://example.com/?foo#/
Why is this happening, and can I turn it off?
I'd wager you need to be in 'html5 mode' to not have the hash fragment... though I'm uncertain.
http://docs.angularjs.org/guide/dev_guide.services.$location
$locationProvider.html5Mode(true).hashPrefix('!');
In your app configuration, you can mess with that config param and it'd probably get rid of it.
This appears to be duplicating the hash with the path.
Check out the $location service. It has both path() and hash() methods. The second, duplicated part is the hash, the first part is the path.
Unless you are using html5 mode, all of Angular's part of the URL appears in the fragment. The problem is that Angular doesn't know about the base part of the URL (perhaps the ?foo was needed just to get Angular to load) so it won't attempt to manipulate it, it just puts its own stuff on as a fragment.
I suggest the best thing would be to check $window.location.search for a query string, and if you find one do the redirect to the URL you actually want yourself. You'll still need to do that redirect by assigning to $window.location rather than $location and it will force your angular app to reload but at least you'll end up where you want to get to.
Alternatively you could reconfigure your web server to make the appropriate rewrite, but you may not want to or be able to do that.
Or you tell your users to only use URLs they got from the app, not to try to make them up for themselves.
I'm learning Sammy.js and using it to build a mini-application on top of a REST API I'm working on. I couldn't find this immediately, and I am probably missing something.
I'm using routes like:
this.get("/databases/:name", function () { ... });
I basically want to take the route path and pass it along to my REST API, since they largely match up anyways. I've inspected this within the callback, and found a property called path that contains the full path, including the filename. (i.e. /index.html#/databases/foo)
All I care about is what comes after the #, and I wonder if there is something baked in so I don't have to use this.path.split("#")[1].
You could just look at window.location.hash and strip off the leading #. That should be pretty much the same as pulling information out of this.path.