Skip to content

Instantly share code, notes, and snippets.

@golampo
Last active March 16, 2021 04:19
Show Gist options
  • Save golampo/6169712a1330b377724f46cec767bed8 to your computer and use it in GitHub Desktop.
Save golampo/6169712a1330b377724f46cec767bed8 to your computer and use it in GitHub Desktop.
3.23.0 willTransition queryParams bug
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
import Controller from '@ember/controller';
export default class FooController extends Controller {
queryParams = ['bar'];
bar = undefined;
}
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('foo', { path: '/*path' });
});
export default Router;
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class FooRoute extends Route {
@service router;
@action
willTransition({ to, from }) {
// Redirect /1?bar=abc to /2?bar=xyc
if (to.queryParams.bar === 'abc') {
this.router.replaceWith('foo', 'foo-2', {
queryParams: { bar: 'xyz' }
});
}
return true;
}
}
Step 1: Navigate into the foo route:
<br>
<LinkTo @route="foo" @model="1">Click me</LinkTo>
<br>
<br>
{{outlet}}
<br>
Step 2: This link will redirect to /foo-2?bar=xyz in the willTransition.
<br>
<LinkTo
@route="foo"
@model="foo-1"
@query={{hash bar="abc"}}
>
Link to /foo-1?bar=abc
</LinkTo>
<br>
<br>
In the Ember 3.23.0 release the queryParams are not able to be updated in the redirect, though the path can change. The resulting url will be /foo2?bar=abc
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment