Comments (5)
@schlesiger setting <base>
causes otherwise()
to trigger on each transition for me as well. In my case, I could work around the issue by simply setting the URL of my root state to my desired <base>
url (e.g. { url: '/theapp', name: 'app' }
and removing <base>
altogether. Not sure if this is recommended practice, and obviously won't work in all cases, but seems to work for me.
from core.
Thanks @telekid for replying! I am glad to know I am not the only one. Your solution is definitely another option in most cases. However, my project is a React component built on top of ui-router/react
with prepopulated routes - including otherwise()
. While it may be possible for users to override the already defined otherwise()
, it's an added complexity. The whole point of my component is to alleviate much of the typical boilerplate when starting with a navigable UI. My hacky otherwise()
logic still works and I'll stick with that for now.
The real solution to fix the bug where otherwise()
is called on every transition when <base>
is set.
from core.
I'm still not sure why state transition is always triggering otherwise()
when the <base>
tag is included. For now, I tried to resolve the state myself inside otherwise()
. After some trial and error, it also appears _baseHref
is included in the url resolution and fails. If I remove the _baseHref
, for example. '/ui-router-react-digest/taba', the path is resolved correctly. Here's what I ended up with:
const baseHref = document.getElementsByTagName('base')[0] ?
document.getElementsByTagName('base')[0].href.replace(/^.*\/\/[^/]+/, '') :
'/';
router.urlRouter.otherwise((found, route) => {
const resolve = router.stateService.get().filter((state) => {
return state.$$state().url &&
state.$$state().url.exec(route.path.replace(baseHref, ''));
})[0];
return {
state: resolve && !resolve.abstract ? resolve.name : shortName + '.tabs.' + tabs[0].name
};
});
I actually have to retrieve the <base>
href
myself because _baseHref
isn't populated when otherwise()
is first called. Also, back button also calls otherwise()
triggering state and clearing any forward history.
Another note: if <base>
is used without href
, such as <base target="_blank">
, instead of href
remaining undefined
, Chrome and Firefox seem to set href
to whatever the initial URL is. This seems pretty dangerous for HTML5 apps; since even if say otherwise()
resolved to a correct state, href would always be incorrect. It should be noted somewhere that if <base>
is used, href
must be set; perhaps here? Maybe it's common knowledge, or it's an unlikely scenario, but it definitely cost me time.
from core.
Please try again with @uirouter/[email protected]
from core.
Looks good! I removed my previous additional logic to otherwise()
and everything is working:
https://wallzero.gitlab.io/ui-router-react-digest
Thanks!
from core.
Related Issues (20)
- License clash MIT vs CC BY-SA 3.0 HOT 2
- @uirouter/react 0.8.9 not finding UIRouter HOT 1
- Any plan for Svelte 3? HOT 7
- Can't compile angular 8 under typescript "~3.5.3" HOT 3
- Version 6.0.2 breaks using ui-router core on Node.js without a browser HOT 1
- Can't bootstrap a hybrid application in Angular 8 due to commonservices being undefined HOT 6
- string parameters are url encoding issue HOT 5
- is AOT supported? HOT 1
- Ability to set defaultHrefOpts globally HOT 3
- Ugrading to uirouter1.x and installed ui-router-core and ui-router-angularjs ,doesnt support legacy code base HOT 1
- `inherit` is documented as having the wrong default value HOT 1
- Cannot read property 'when' of undefined HOT 19
- Child states their childs, show the parent component HOT 3
- Set uiOptions.reload of [uiSref] to a future load state name lead to error at first load HOT 1
- license issue HOT 1
- How to lazy load with chunks HOT 1
- Support Ivy partial compilation HOT 10
- `ParamDeclaration.inherit = false` is ignored by `$state.href()`
- Issue with StateParams HOT 4
- error TS1086: An accessor cannot be declared in an ambient context (v6.1.1) HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from core.