In mY routes this is detectable
'resume/:assessmentId/:resultId/:skip': 'resume'
Now when i navigate to
resume/a/b/c
every thing works and resume function will call
but when i do this
'resume/:assessmentId/:resultId(/:skip)': 'resume'
and navigate to same url it will not work
Actually my url is resume/a(required)/b(required)/c(optional)
The optional parts via parenthesis are supported since version 0.9.9
Backbone changelog
Related
I'm having issues with react url param routes and it's giving out error on amplify.
Example routes with url params
<AsyncSearchResultsList path="search/:q" />
<AsyncSearchDetailedInfo path="search/user/:id" />
This is the error I'm getting
On amplify I have these redirects setup
I can't navigate to either of these routes and it works fine for other routes without parameters
All of these routes are also working perfectly on localhost
Is there something I'm missing? I'm using Reach Router in my react project.
Update:
Figured what seemed to be part of it, the issue I was having was resolved. Amplify wasn't handling the Lazy loaded route components properly, data is flowing and the page is loading now after refactoring. But another issue came up, the page now displays blank whenever I navigate to those routes directly. I'm pretty sure it's an issue with Amplify's redirect rules. Still need help!
To those who need to use react and params
Source address
Target address
Type
Country code
</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>
/index.html
200 (Rewrite)
-
/search?customer=<customerid>
/search?customer=<customerid>
301 (Redirect - Permanent)
-
Ref: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
and
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#query-parameters
In my react app I'm using react-router with BrowserRouter.
my webpack file has
devServer.historyApiFallback: true
I have a
<Route path='/details/:parameter' />
when navigating through the app, both the fallback and the route(s) work as expected.
However, if I'm on the route that serves at /details/:parameter and I refresh, the app breaks and tells me in the console that it can't find
/details/webpack_bundle.js
however the url in the browser still contains the correct route with its parameter.
I was hoping to find an elegant solution to this. Any explanation for why it's behaving this way is appreciated.
duplicate question: see React nested route fails to load on refresh.
I'm using HTML Webpack Plugin in webpack and this is the solution I found.
webpackConfig.output.publicPath = '/'
this loads the bundle from the root directory.
Open up your console and check if your getting an unexpected token error '<'
It's probably because in index file you're missing a slash '/' before the bundle.js. Change it to <script src='/bundle.js'><script>
Check out this answer: Express.js, Unexpected token <
Why does Angular sometimes use a hash in the URL and other times use a hashbang? I've started writing two Angular apps from scratch. Neither are using HTML5 mode. Both have the same default route. However, the default URLs display differently.
I've been seeing this random behaviour for at least a year... long before angular-route v1.6. Also, I've always used angular-ui-router.
The default route:
configRoutes.$inject = ['$urlRouterProvider'];
function configRoutes ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}
App #1 resolves this...
http://localhost:3000
... to this ...
http://localhost:3000/#/
App #2 resolves this...
http://localhost:3001
... to this ...
http://localhost:3001/#!/
Note the last two characters in the default URL.
I know how to activate HTML5 mode and pretty URLs. That is not what I'm asking. I would really like to understand the significance of both URLs above and why Angular is writing them differently.
Current versions:
angular-ui-router v0.3.2
angular v1.6.0
When we upgraded from angular 1.5 to angular 1.6, the URL of our app changed from /#/ to /#!/. We fixed the problem by configuring the hashPrefix in the application config:
angular.module("myApp").config(function($locationProvider) {
$locationProvider.hashPrefix("");
});
I have angular app working well under /app#/index and another page on /newapp#/about
So my question is is there anyway, i can switch from url1 to url2?
Because I have different layouts for /app and /newapp
I know that i can use $location.path to change view, but that will change it to
/app#/index => /app#/about, which I don't want.
Any Ideas?
$location is only useful for observing the current location, and changing it to paths the app can route to. If you need to navigate the user to a location outside of the app, you'll need to $window.location.href = '/newapp#/about'.
If you are providing links via <a>, you should be alright. There are three scenarios (See "Html Link Rewriting") where AngularJS will let the browser navigate to the new URL normally:
There is a target attribute: Refresh /app
There is an absolute URI in href to another domain: Redirect to google
The absolute path (one beginning with /) has a different base than the current app: Redirect to /newapp
I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.
The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.
I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.
How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?
UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:
$location.path('/login').replace();
but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.
Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?
For future reference, this is how I managed to solve the problem:
AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:
<script>
var html5Mode = false;
</script>
So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. login.
That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.
**
So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.
I had this same problem as well. I managed to fix it by skipping the leading slash in the route config:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.