When my is initiated I get directed to this state:
$stateProvider.state('dashboard.tasks.overview')
I have a link that I want to use to go into a new state
<div ui-sref="responsive.details({id:'6710cc8c-e0ca-e811-80fd-00155d168404'})">click</div>
And a routeconfig with $stateProvider.state('responsive.details')
When I click the link I get:
Possibly unhandled rejection: {"$id":2,"type":4,"message":"This transition is invalid","detail":"Could not resolve 'responsive.details' from state 'dashboard.tasks.overview'"}
So when I click the link it triest to find the responsive.details child route in the dashboard.tasks.overview. Is it possible to direct a ui-sref to a new route instead of a child route in a parent?
In ui-router, states are built up in a hierarchy. This means that the responsive.details state is a child of the responsive state. When you navigate to some state, any parent states of that state must also be loaded.
In your example, you never mentioned creating a responsive state.
Add some sort of $stateProvider.state('responsive', {...}); call.
Alternatively, just rename the responsive.details state to responsiveDetails, as a test.
See the ui-router documentation for states.
Related
I've a nested tab navigation with React Navigation and I use AsyncStorage for state persistence of the navigation. What I want to do is ignoring the saving of the state when user opens the nested navigation stack (Programs > ProgramMain/Recipes/Support). Here is my structure:
-Home
-Programs
---ProgramMain
---Recipes
---Support
-Profile
I tried to inspect passed state variable of the NavigationContainer's onStateChange but couldn't figure out how can I know which screen/stack is selected.
Thank you very much for your help.
I think you're on the right path and you can find this info in the route property of the state variable passed by NavigationContainer's onStateChange:
Every state object contains a route property (list of route objects), which lists the screens that are rendered in the navigator.
A route object may also contain a state: An optional object containing the navigation state of a child navigator nested inside this screen.
See https://reactnavigation.org/docs/navigation-state
This page shows an example on how to get the active route from a navigator so you know which screen is currently active.
I'm using React 16.6 and react-router v4 for a master-detail web application. I'm showing headers in a navbar, with individual elements rendered using React Router and Links. Using components I can easily render array elements, but I want to allow in-place editing for each component with state changes propagated back to the parent.
Following details here, I've tried passing a callback function using state in the "to" object. The function isn't available when I inspect the component constructor.
Example
<Link class="col" to={{pathname: `/listing/${id}`, state: {entity: elem, callback: updateComponent}}}>{elem['name']}</Link>
Where updateComponent is a function.
What's the preferred way to approach this scenario?
Just glanced it over and from what I gather the action is for the History.
action - (string) The current action (PUSH, REPLACE, or POP)
You could trigger callbacks with onClick
I am working on angular js state providers...I am using parent states and its child states.
For example ..
Parent state is 'home'(url:/home) and its child state is 'home.profile'(url:/home/profile)
Each states are having the resolve: methods
Inside resolve methods i am calling the webservices.
My problem is when i am hitting the home.profile both resolves are called parellely
But i want to call the profile state once after home state is resolved
Thanks in advance...
The use case is that I want to map the root (/) to one of two different components based on whether the user is logged in or not, and I want these two components to reside in different bundles and lazily loaded, so simply putting the login check in the render() method would not do.
I tried to use dynamic route definition with require.ensure() to lazily load the component, and it works for the first time, but after changing the login state the component doesn't get updated (even if I navigate to another route and back to / ).
I tried to force re-rendering the router by setting props on the component that contains the router, both manually and by making it a Redux connected component, and I also tried to add a listener to the Redux store and change the component state in response to login change, but in all of the attempts I got the error "You cannot change ; it will be ignored" and the component doesn't change.
My ugly solution is to have the different component loading code outside of the router, listen to the login state change and in response load the matching component and set it in the wrapping component's state, which is referenced in the render() code. Is there a clean "React-Router-ish" way to do what I want?
React Router 4 pretty much solves this as it made the route configuration part of the component rendering, so having conditional rendering is the same whether it's based on the location or on other props/state.
The closest thing to a clean "React-Router-ish" way to do that is to use the React Router Enterhooks.
An enter hook is a user-defined function that is called when a route is about to be rendered. It receives the next router state as its first argument. The replace function may be used to trigger a transition to a different URL.
So, use the onEnter(nextState, replace, callback?) attribute on your <Route />.
Called when a route is about to be entered. It provides the next router state and a function to redirect to another path. this will be the route instance that triggered the hook.
If callback is listed as a 3rd argument, this hook will run asynchronously, and the transition will block until callback is called.
The general best practice I follow is to place the auth-check flow away from your routes, and place it inside the transition events/hooks.
The usual behavior is - before the route handler actually gets rendered, check the auth, and redirect the user to another route. In your case, if you want to use the same route, but render different components - you should be able to do that using the same technique too. However, that's not a common thing (based on what I've seen), but it should be possible.
For a complete example of this approach, here's the auth-flow code example you can check. It is shared by the creators of React Router, so it looks credible to me.
PS: My answer is valid for React Router versions > 0.13.x.
I'm trying to get one thing to show when the user visits
mysite.com/projects
and another thing to show when they visit
mysite.com/projects/project
However, despite following the tutorial in the official documentation, my set up won't work.
Does anyone see where I'm going wrong? I've looked at everything and compared character for character with the official docs.
See my Plunkr
You are mixing concepts in your states. In some places you are referencing /project as it's own state, in others you are trying to reference it as a child state of /projects.
You can only use projects.project when you are embedding the contents of the child within the template of the parent.
I created two forks of your Plunkr, showing both independent routes and parent/child routes.
Note in the parent/child route, there is an additional <div ui-view></div> in the parent template.
Singular routes: http://plnkr.co/edit/jIMcdTuifE8oRpg83vtN?p=preview.
Parent/child: http://plnkr.co/edit/A85svCnngB7x4PJCUUf9?p=preview
You have two problems in your exemple.
First, your link to the projects.project state is incorrect. You need to put the full name of the state in the ui-sref attribute, so projects.project.
Next, your trying to use nested state. When navigating to the projects.project state, the projects.project state will not replace the projects state. In fact, the projects state will host the child state. So you need to add the ui-view directive inside your projects template (the r1.html file).
Here is a functionnal Plunkr: http://plnkr.co/edit/LyBM4QiKiw8sAoI0jiKo