Comments (8)
I'm not certain, but it seems to me that the component is not yet mounted. Try registering your callbacks in componentDidMount
(and unregistering in componentWillUnmount
)
from react.
yeah, it sounds like the component is not mounted. Placing the code in componentDidMount
ensures that the component is actually mounted. It may also be that the onSuccess
method is not bound to the instance, buy I'd need to see more code to understand better.
from react.
I tried registering the onSuccess
transition hook handler in the componentDidMount
lifecycle hook. However, this did not cure the problem.
Which makes sense in retrospect. There was no issue registering the hook. The onSuccess
handler fired as expected. The issue is that the setState()
call within the onSuccess
handler fails because the component is not yet mounted when the onSuccess
handler is fired. (Are there transition hooks that definitely fire after the component is mounted? And would I still have access to the passed state params at that time?)
I've isolated the issue in this project: https://github.com/kboucher/uirouter-test
(I'm also trying to setup a plunker, but so far the handler doesn't fire in that context at all.)
from react.
The issue is that the component gets unmounted. See lifecycle in pr:
https://github.com/kboucher/uirouter-test/pull/1
from react.
@Kukkimonsuta Not sure how that helps
I merged your changes and the onSuccess
handler no longer fires at all. As I stated above, all I'm trying to do is utilize transition hooks to capture state params passed from one route to another.
This works in Angular, but not in React. If this is not a bug, how can I achieve this functionality?
from react.
It's not fix, more of an explanation why it's not working.
From my tests I believe ( @elboman correct me if I'm wrong )
a) params
can only hold values defined in URL
b) you can pass any other values in options.custom
There seem to be however a bug/feature, where the transition
prop is always the same for retained states - meaning in this case that transition
prop on parent
has always #id=0
. @elboman Please check the repro https://github.com/Kukkimonsuta/uirouter-test
from react.
If the handle doesn't fire anymore it sounds like it shouldn't be fired at all, as the parent components gets unmounted during the transition.
I'm trying to understand what you want to achieve with this, as I'm not even sure you need a hook here. Transition hooks are useful for modifying a transition while it's happening, or to interact with the rest of the application (outside of the router scope).
As @Kukkimonsuta already mentioned, there are to ways to pass data from one state to another, and it depends on your needs and how integrated it needs to be in the app architecture:
State params
Each state param has a type:
- Path parameters (/:fooParam):
path
- Query parameters (?queryParam):
query
- Non-url parameters (param: { foo: null }):
any
Or you can define custom param types.
Transition options
You can specify custom data in the transition options, and it will be passed along with the transition, using the options.custom
property.
Differences
The difference between the two rely on the use case: state params are more verbose but give you a lot of useful tools. They are explicit and declarative by nature, they are typed, encoded/decoded by default (in the url for example), you can have default values, and so on. (more info here)
The option.custom
is a quicker way to achieve this but you won't get all the goodies mentioned above, so I encourage you to use it wisely and only when you need to pass data into some specific transition hook.
The transition prop is not always the same for retained states, if anything changes then the component is re-rendered with the new transition prop. What you are experiencing is the inherit: true
default option provided in both the UISref
and the stateService.go()
transition methods. Since the transition is inheriting any param, the value will stay the same until you override it.
Anyway, I created a simple codesandbox to better illustrate what I mean, let me know if you have any doubts.
from react.
@elboman Thanks for the clarification and posting that example.
As you indicated by your statement, I apparently did not need a transition hook to simply pass data from the child to the parent.
Transition hooks are useful for modifying a transition while it's happening, or to interact with the rest of the application (outside of the router scope).
I forget now, but I think I went down that path after unsuccessfully trying to the more direct route of accessing the transition params
first. However, I think the key ingredient that I was missing was the declaration of the param
on the state definition:
var appStates = [{
name: "parent",
url: "/parent",
component: Parent,
// Needed this declaration
params: {
dataObj: '[null]',
}
},
(It was also not necessary to set inherit: false
on the call to transition back to Parent
.)
I'm still a little fuzzy on some of this, but your responses have helped immensely. Thanks!
from react.
Related Issues (20)
- Can ui-router/react support React18 new features? HOT 6
- testing ui router with relative paths
- {location: 'replace'} doesn't work in stateService.go(stateName, params, {location: 'replace'}) HOT 1
- useSref: "target="_blank" ignored when link contains child elements HOT 1
- Is this project still under active development? HOT 3
- Use same UIRouter instance inside different React.render(...) HOT 1
- Typescript demo errors on `1.0.1` HOT 1
- animating-transitions demo errors on `1.0.1` HOT 1
- Router.start() called more than once HOT 1
- 404 on react-dom.js on the tutorial pages HOT 2
- Path duplication after page refresh when using UIRouter pushStateLocationPlugin HOT 4
- Params of type json are not deserialized properly HOT 5
- States not gets enabled if there are nested lazy loaded states HOT 2
- UIView Doesn't Render with Usage of `urlService.rules.when` HOT 4
- Scroll restoration HOT 3
- Cannot use useRouter HOT 4
- Jest/Enzyme Transition Rejection/TypeError HOT 1
- UISref Component ignores target="_blank" on child anchor tag HOT 3
- Mocking UiRouter Classes with Jest HOT 4
- useCurrentStateAndParams don't reacting on initial state HOT 5
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 react.