I am receiving below error when using useNavigate(-1) or window.history.back(). It was previously working without any issues.
"You are trying to block a POP navigation to a location that was not created by #remix-run/router. The block will fail silently in production, but in general you should do all navigation with the router (instead of using window.history.pushState directly) to avoid this situation."
You can't assign a value to this keyword during execution context, because it is immutable.
this is a keyword
window is a global object
Related
How do I push a page using React and Ionic with functional props?
I did try:
history.push({
pathname: '/edit_some_property',
state: {
onSetSomeProperty(val) { setSomeState(val) }
}
})
But that throws:
DOMException: Failed to execute 'pushState' on 'History': onSetSomeProperty(val) { setSomeState(val); } could not be cloned.
Apparently, state is serialized to a string, so passing functions isn't going to work.
Or is there another approach that would work better for pushing screens with callbacks to the previous screen?
Background and Detail:
I have a very hierarchical style React + Ionic app.
Choose an item from a list, push a screen with item details.
Choose a sub item from a list, push a screen with sub item details.
Tap to edit an attribute, push a screen with form fields, and callback to the previous screen with the result.
Now it appears that in order to navigate from screen to screen, Ionic requires you to use React Router, where each page has a unique URL. But this doesn't work so well here since each screen depends on the state of previous screens.
This means that there is no apparent way to communicate rich props between pages. If I have a callback to the previous page, I can't pass that along because I don't have direct access to component being pushed with the router in the way.
There's also ion-nav https://ionicframework.com/docs/api/nav which is closer to what I think I need, but that doesn't seem to have a react interface at all.
I tried:
<IonNav root={Home} />
Which throws this, deep in obfuscated internals:
Error: framework delegate is missing
My original answer was way off base sorry. I did some testing, and found that anything passed to state needs to be serializable. In order to do this for a function, others have reported that https://www.npmjs.com/package/safe-json-stringify helped them out.
I'm using angularJS and migrating to ui-router v1. I'm trying to get deep state redirects working like they used to in the previous version of ui-router.
I've successfully implemented the DSRPlugin in my config modules, and deep state redirects are firing and work as expected. However, I'm unable to reset the deep state. I need to be able to reset the deep state on a button click, which means logic within my component. Previously I could inject $deepStateRedirect into my controllers and simply call $deepStateRedirect.reset({}), but I'm no longer able to inject $deepStateRedirect. How can I access the reset method in ui-router v 1?
I have also noticed that when using DSR as a config object you can specify a function to determine if the redirect occurs. I could alternatively use this to determine whether to do the redirect or not, but the documentation is lacking. It shows that I should return a truthy value to do the redirect or a falsey value to prevent the redirect. In testing, returning true or false only causes a transition error: "i.state is not a function".
I'm not using a build process, just plain script includes.
Anyone have any ideas on how to make this work through either of the above methods?
This may not be the best practice way of doing the reset, but I found a solution after logging out various ui-router objects.
Inside of your controller you must inject the $uiRouter object. Then, you can set a variable to $uiRouter._plugins["deep-state-redirect"]. The reset() and other methods are available on the plugin's prototype.
You can then use that object and call those methods similar to how it worked in the previous version when injecting $deepStateRedirect.
var $deepStateRedirect = $uiRouter._plugins["deep-state-redirect"];
$deepStateRedirect.reset({});
I found this only in the source code and then in the documentation: https://ui-router.github.io/ng1/docs/latest/classes/core.uirouter.html#getplugin
The more correct way is to use UIRouter#getPlugin(pluginName), that is
var $deepStateRedirect = $uiRouter.getPlugin('deep-state-redirect');
$deepStateRedirect.reset(...);
Im passing some variables from outside of my react app (create-react-app) and it works fine on front end but I get build errors in webpack/npm? Because the variable doesn't exist (or it doesn't know about it).
I have this var in a var preloadTab = "x"; in my .net page
49:31 error 'preloadTab' is not defined no-undef
54:14 error 'preloadMsg' is not defined no-undef
I tried putting an undefined check around it but think its just flagging that instead now:
if (typeof preloadMsg !== 'undefined') {
if (preloadMsg != ""){
console.log(preloadMsg, "preloadMsg")
this.setState({preloadMsg: preloadMsg})
}
}
Whats the best way to pass a variable from outside the react "ecosystem" outside of an ajax call?
Sounds like you can make use of either getInitialState or by setting defaultProps for the component. Would either of those work for your case?
As azium already stated in a comment, another option would be to pass the data in as a prop. If you don't have access to the component, then you can save it as a global value either via window or using a constants file. Having a constants file is common in React apps and I would suggest this route over using window.
In Polymer applications, app-location and app-route are used for page routing. The first line in the application has app-location component as below:
<app-location route="{{route}}"></app-location>
As I understand, the route="{{route}}" is used to bind the app-location route attribute to a "route" variable that is defined outside app-location component. It is the input to app-location. Where is the "route" variable defined?
The documentation says: the app-location produces a route value.
Does it mean that app-location creates a variable "route" in global name space and hence becomes available for other components to consume?
Just found that the statement
creates this.route variable that is available for the app.
In my application I'd like to have certain portions of the app not be able to deep linked to. For example our users have a list of surveys and I'd like if someone tried to go directly to a particular survey directly such as /survey/1 that react router would pick up on this and immediately redirect them back to /survey and they would have to select the one they want. I've tried to write onEnter hooks but they seem to be very cumbersome since the only way I've been able to get them to behave correctly is to store some global state that says they have been to the main page and inspect that every time the route is navigated to.
Im using pushstate in my application if that makes any difference and react-router 2.0
I'd like to try to avoid having to write server rewrite rules for this since there are a lot of areas in my application where this rule is applicable.
I have a suggestion which is similar to the onEnter hook:
Wrap the component of the survey/:id route with a function which verifies if deep linking is allowed or not, let's call this function preventDeepLinking
The preventDeepLinking function checks if the location state contains a certain flag, let's say allowDeep. This flag would be set in the location state when navigating from another page of your app. Obviously, this flag will not be set when the user tries to navigate directly to the page of a survey.
The preventDeepLinking function will render the wrapped component only if deep linking is allowed, otherwise will redirect to a higher route.
I created a sample on codepen.io. You can play with it in the debug view of the Pen: http://s.codepen.io/alexchiri/debug/GZoRze.
In the debug view, click the Users link and then on a specific user from the list. Its name will be displayed below. Notice that its id is part of the url. Remove the hash including the ?_ and hit Enter. You will be redirected to /users.
The code of the Pen is here: http://codepen.io/alexchiri/pen/GZoRze
The preventDeepLinking function can be improved, but this is just to prove a point. Also, I would use the browserHistory in react-router but for some reason I couldn't get it running in codepen.
Hope this helps.