Navigate to a specific component (React) - javascript

I have a page 1 and a page 2. On page 1 is a specific component. On page 2 I have a button. After clicking on that button I want to navigate to the position of the specific component on page 1.
Is there a legit way to handle this?
By the way I am using GatsbyJS.

If you are using Gatsby, there is a plugin made for that :)
https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/
Else you can just set an id on the component on page 2 and link with /page2#yourid

Related

Refreshing header's component on other component's initialization in Angular

I'm building a multi page application that's based on Angular on the front. My app.component.html is made of:
<app-header></>(header component)
<app-sidenav></> (side navigation component)
and everything else is in <router-outlet></>.
In my header component, I have a bookmark button that opens a modal for adding a page to Favorites. It takes an url of a current page that's loaded on users screen and lets a user choose the page's name. The logic I'm trying to implement is next: if that page's url is already in user's favorites (which gets checked by the function from favoritesService, the bookmark button should change it's color and become disabled. This logic works perfect in a way that it compares current url with an array of added url's but the button's color doesn't change and it doesn't become disabled untill I refresh the page( because the function for checking if a page is already a favorite is called on header component's ngOnInit and it loads only at the start of the application(the boolean attribute in the header component doesn't get refreshed otherwise)). So, just a few more sentences to clarify, in case you didn't understand the scenario: Header component is loading at the start; user is browsing other pages not depending on the header component. When I change the page, header should check if the current page is already a favorite and if it is, a button from header.component.html should change its color and become disabled. This works perfectly, but only after I reload the whole browser, because only then is when the header's component gets refreshed and triggers the function for comparing URL's.
here you can do state management by using observable or BehaviorSubject. with that you can update your header component.

React - possible to use the back button in browser in a form

I'm trying to build a dynamic form where the data sent from the server will be rendered by the client. The form will have X amount of steps, decided by the data.
I have my component Form rendering X amount of components Steps.
My problem now is that since it's all the same component, Form, there's not possible for the user to click on the back button to go to the previous step in the Form. I somehow need to keep my URL in sync with my Form/Steps.
What would be the best solution to this problem? Using HashRouter and using Route with "/:id/:step"(how would this work)? Pushing the routes in automatically using useHistory-hook?
The most simplest case as I think is to create parent component with state step and change it when a user go or return to step. Based on step you should render the appropriate step.
A css solution would be to break the form into sections and show 1 section at a time, when some one clicks on the navigation buttons of the form a state update triggers another section to be shown while hidihng the current one. This can be done using CSS transitions, you can look into react-transition-groups to make css transitions with react easier

how to get Previous Route in Angular 4 app

I have 2 routes defined as homepage and page1. I am going to page1 from homepage by this.router.navigation(with some queryparams).Now once i go to page1, i have some filters,which i can add to get particular data from api.Once i add those filter i change the page1 url by this.router.navigation(with some queryparams).After adding/deleting multiple filter , my url changes many times..Now i have a back button which upon click should navigate me to Homepage.
1.I have tried using history.back/location.back.But i have to click multiple times.(i see that navigationstart gets called multiple times)
2.i have tried a solution using rxjs pairwise
But i am not able to get the previous page(homepage).
3.This is just a situation.Basically i have to get the route of the preious page.I can't hard code the path in backFunc,Because this has to be generic for all of my other similar types of pages.I can come to page1 from any other page, and should be able to go back to the respective page.
Am i missing something very obvious , does Angular 4 provides any way to tackle this?
I'm slightly confused by the question but it should be as simple as just navigating to the homepage by using router.navigate. Failing that, try using https://angular.io/api/common/Location service's back function.
router.navigate has extra parameters like "replaceUrl".
If you set it to true (when you change query params), the browser will consider you don't change page. So an history.back will works.
Have a look at https://angular.io/api/router/NavigationExtras.
this.router.navigate(['/page1'], {replaceUrl: true, queryParams:{...}});

Ionic-1 Navigation

I am working on an Ionic-1 App. I am terrible confused in managing the back history of my app. Consider this scenario:
Start from home page then
Does a 3 step user registration process
After the end of user registration redirect to records page
Now clicking back button (hard or soft back) I want to navigate back to home instead of cycling through user registration process. There are other scenarios like this where back behavior needs to be modified. Are there any references around to implement back behavior systematically? Should I manually define view hierarchy tree structure and somehow figure out where in tree current view is and then go to parent?
As per my suggestion you should pass parameter say 'extraparams' in your url and set it value to 'home'.And on record page controller then make a function on back button say 'goBack()' where you can check if value of 'extraparams' is 'home' and then use $state.go() to navigate to home view.
If you can keep and maintain each and every section using state approach then you can redirect to home page or what ever the page you prefer to redirect to.In that way you have to implement back button like this way, $state.go('homeSate');
or if you can keep 3 steps(registration) as sub states and have try by injecting $rootScope to your controller in which allows you to access your parent(home).

Is navigation to another page in angular introjs possible?

I am using angular introjs in my project on a page for the first time. It works fine and I am able to use customized options too. But want to navigate to another page through the steps.
For example, on first step I click next, the second step should be navigation to another page, and not the step in the same page.
Is there an option under ng-intro-options in angular introjs for navigating to other pages aswell?

Categories