New programmer here who is messing around with lots of stuff.
So, i have this article searching application.
There is an input, you write stuff and it shows you articles containing the term that you used. Then you can go back and forth between pages of articles.
/home/?term=&page=0
When i click one of the articles, it takes me to a summary page with, well, a summary of the said article.
/home/article
What i want to do is, being able to go back to the home page with the last search parameters still intact.
Think of it similar to how google doesn't take you to just plain google.com but instead to the last search page that you were in.
How can i do that?
Small edit: if there is a way to just go back to the last page(With search params intact) without needing to put it in the URL or something similar, that is similarly fine of course.
In React Router v6 you can use navigate(-1) as documented here: https://reactrouter.com/docs/en/v6/hooks/use-navigate
Example:
import { useNavigate } from "react-router-dom";
const MyComponent = () => {
let navigate = useNavigate();
const goBack = () => {
navigate(-1);
}
return <button onClick={() => goBack()}>Back</button>
}
Related
I would like a mobile app like experience where when you push a new route on the stack, you can pop from the stack and previous route's state is still there. This is especially helpful when you have text fields on the previous route.
Currently when I fill in text fields on one page, then navigate to a new route, then pop back with:
const navigate = useNavigate();
...
onClick={() => navigate(-1)}
The text field is cleared, presumably because the previous route's component unmounted. How can I prevent this?
I am trying to implement "go back" functionality for a page that could be access from n different urls.
Example, all the following URLs will link to abc.com/b1:
abc.com/a1
abc.com/a2
abc.com/a3
abc.com/a4
...
abc.com/an
From abc.com/b1 I want to support a link that takes you back to the previous page you visited.
My first attempt is to use:
...
const navigate = useNavigate();
navigate(-1);
...
However, if you land straight in abc.com/b1 navigate(-1) will likely take you outside of my application into some other site, or browser about:blank.
What is the best approach to implement such functionality?
is there a way to access the history length to check wether we should navigate(-1) or push a new page?
should I pass additional state/query from a pages to b? so b knows how to go back? this seems like overkill.
Thanks.
I was with the same problem, but I finally found a solution that worked for me.
I'm using the react-router-dom#6.2.1.
// Simply return to the previous page or to the initial route
navigate('..')
I'm implementing a small project with only two UIs.
1-The first UI is called Home which contains paginated users list the home component.
2-The second UI is called user details which contains user profile the user-details component
3- and of course the app component which contains the tool bar and router-outlet
let us suppose the following scenario
I'm in the home UI and in the second page of the paginated users list and I clicked on one of the users item then the user-details UI appeard and I'm now in the second UI and I now I want to navigate back to the home but when doing so the home UI is recreated and become the first page of the users list instead of the second page where we left it because this is my code of the back button
<img
routerLink = "/home" style="cursor: pointer;"
width="40"
alt="Angular Logo"
/>
<span routerLink = "/home" style="cursor: pointer;">Users</span>
my question is:
is there is any way to implement it in such a way it doesn't recreate the home page i.e. implement the correct behavior of back button?
There's a couple ways that you can approach this.
If you're using a pagination library (such as ngx-pagination), then hopefully the pagination component takes an input for the current page. You'd then need to keep track of that page either through a service or in persistent storage.
Whenever you route back to the Home UI, get the page that you were on and load that back into the pagination component.
Another way can be to use router parameters. By modifying your urls a bit, they can take on the following form:
/home/1
/home/2
/home/3
Clicking on a user in page 2 can give the url: /home/2/user-id (just an example)
The path for your home component can look like:
const routes: Routes = [
{ path: "home/:pageNumber", component: HomeComponent }
];
Upon loading the home component, you can get the get the router parameter as follows (I'm using the Router method but you can parse the URL manually as well):
export class HomeComponent implements OnInit {
constructor(private router: Router) {
const pageNumber = this.router.navigationExtras.params['pageNumber'];
}
}
You can then load this page number into your pagination component. Using this method doesn't require you to keep track of the previous pages.
There are probably better methods to do this, but this is just some suggestions :)
In my Angular 8 project, I currently have a landing page (template-table.component) that shows a list of items that can be filtered and sorted. The filter and sort are added to the route queryParams(ex: "/template-table?name=another&type=Type%201"). If you select an item in the list, you will be taken to another route (that has the template-details.component) that has more details on that item. This details page will have a 'back to list' button that should take the user back to their previous list page.
Since I want the user to be taken back to the list with the filter params they were previously using, I can't simply go to the route of that component, instead I want to go back in history (like how the browser back button works). So, how do I set an element to link to what the browser back button would be link to?
So, this is the bare minimum of my template-detail.component.html:
<h1>template-details works!</h1>
<div>{{template}}</div>
<div>{{id}}</div>
<div><a routerLink="/template-table/">Return to list page</a></div>
I think I also would like to check the route to see if it's the template-table component route with query params, and not an unrelated route. (So, the route would need to be like: "/template-table?params=xxx", and couldn't be "google.com". If the browser back button isn't related to the template-table, then it should go to "/template-table" without any params (or maybe my 404 page.)
The basic functionality that I'm wanting to achieve is for the user to be able to filter a list, go to another route with more info on a list item, and then return to the list with the same filters they previously added. If there would be a better way to do this than by trying to access the browser's back button, I'd love to hear about it.
Thank you for any assistance you can provide.
Arthurofos' suggestion to use the Location service seems to be relevant, as it can be used to navigate back to the view you were in prior to routing to a new component.
Of course, while there are very Javacsripty-ways to do these sort of things, it's always recommended to use Angular's libraries, if such an alternative exists.
In our case, it does, and it presents itself as the 'Location' service you can inject into your component.
import { Location } from '#angular/common';
#Component({
// Other component info
providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class TestComponent {
constructor(private location: Location, // Other constructor arguments) { }
public goBack() {
this.location.back()
}
}
https://alligator.io/angular/location-service/
Something like that should work:
routerLink="../"
But you can solve this problem in an elegant way thanks to the location of the library. Check out this post: enter link description here
I'm currently trying to write a web testing script which clicks all the links within my side bar. The problem is the amount of links changes depending on what the user has access to/has turned on.
My side bar is called $('#side-menu-bar') and the li's inside of it have class $('.side-menu-item').
According to WDIO's API, I should be able to do:
it('should fetch menu links and visit each page', function () {
links = $$('#side-menu-bar li a');
links.forEach(function (link) {
link.click();
});
});
When run - this will click the first link as many times are there are li's in the $('#side-menu-bar').
I've read and applied lots of previous discussions and answers to questions similar to this, however none have worked. Is this do-able/easier with perhaps a different framework? Currently using Mocha with a standalone-selenium server.