Let's say I have a class handler that would respond on both /handle and /handle/:id.
I have a problem :
The component(in this case , the handler class ) that is shown on both pages has buttons that take me from one to an other, for example a button that gets me from /handle to /handle/195 and another that gets me from /handle/195 to /handle.
So a button on /handle having:
onClick={()=>{hashistory.push('/handle/195')}}
which works perfectly, but the one on /handle/195 with:
onClick={()=>{hashistory.push('/handle')}}
does not, does anyone know how to redirect to parent URL using hashistory?
I apologize if my problem was poorly explained. I tried to do my best.
Thanks.
Related
I dont like this step, I want to add page and there should not be any parent or child. it will stand alone a page only.
Like when i click on creating a page from wagtail hooks or wagtail snippet it should direct redirect me to content creating panels instead of asking parent or child like this page.
I dont want my page should have any parent or child. and even i hate this step of asking parent page.
I have addeed this variable there but yet it showing this steps.
class ListingPage(Page):
parent_page_type = []
subpage_types = [
]
Can anyone help me to get rid of this section?
Pages need to have a parent - the page tree structure determines the URL that a page will have, so if there's no parent, it will never be possible to reach that page at any URL.
However, if a new page has exactly one possible parent, then this choice screen will be skipped. For example, if you set parent_page_types = ['home.HomePage'] and only one HomePage exists in your site structure, then it will skip this prompt and take the user straight to the editing view (which will then create a page as a child of the homepage).
If a user goes to a page that requires a context beyond what's on the url, I'd like to redirect them elsewhere. The use case is:
/todos/list - this page shows the user their list of todos. It contains links to:
/todos/edit?id=1 - this page allows the user to view/edit details about a particular todo.
If a user were to go directly to /todos/edit (with no id), I'd like to redirect them to /todos/list. I have tried doing this via navigate('list') conditionally in the constructor. This does update the browser url correctly, but it doesn't render the /todos/list page. Is this possible to do? Or is this not possible to do the para below?
I understand the more common url would be /todos/edit/1 so that reach router would handle my issue w/out me needing to deal with it. However, I'm just using this as an example of a piece of information required to render the page that isn't necessarily part of the the url path.
of course as soon as I type the question in stackoverflow, I find the answer is in the docs right in front of my face:
https://reach.tech/router/api/Redirect
I have an event function that is triggered by a button click. It's purpose is to keep the body position fixed keeping it from scrolling until you click the button again to close/toggle it off.
It works fine but, when I click to another page without toggling it off it is still active. Meaning the new page will not scroll because the body position is fixed.
I am new to React FYI
My code:
bodyFixed(event) {
document.body.classList.add('body-fixed');
}
bodyRelative(e) {
document.body.classList.remove('body-fixed');
}
I am using react-static withRouteData, RouteData, Router and I have no issues on those pages. But, on pages like an article page where the route doesn't change the same way. This is where I am seeing the problem.
Is there something I can wrap it with so that when I click to a new page it goes back to default?
Please first ask if you need more information and I will gladly add more.
Yes, you can call bodyRelative method in componentWillUnmount lifecycle hook to unset the class. Something along those lines:
componentWillUnmount() {
this.bodyRelative()
}
i am using Angularjs-1.5 with typescript and components.
I have 2 goals to achieve:
1. I have a scenario where in i need to recall a life-cycle of my current controller/component i.e. its constructor(),$onInit() etc.etc.
For that i have tried multiple things but nothing worked as i expected:
constructor(){
let self=this;
this.$rootScope.$on("myEventName",function(){
// self.$rootRouter.reload();//does nothing.
// $window.location.reload();//refresh browser page,so wont be useful.
});
}
2. in one of my child component router does not work for one specific scenario whereas it works for other scenarios :
this.$rootRouter.navigate(['Customers', 'CustomerDetails']);
ideally this route should navigate me to customer details page, but it does do nothing,even any console error is also not displayed.Same code works in one other scenario.
Can anyone guide me to achieve this. Thanx in advance.
Use $state.reload();
Try with $state.go('CustomerDetails')
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.