CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
J.Ko
J.Ko

Reputation: 8731

React/React-router: Go back to the previous component, bypassing changes in same-component URL parameters

Here is how my web app on React works:

-There is a component to list all the contents the user has generated. Let's call this 'List' component.

-In the 'List' component, there is a navigation bar. The selected navigation option will sort/filter the contents the user has generated. The navigation options are passed as URL parameters.

-On the top of the 'List' component, there is a 'go back' button, which will route the user back to the previous component from which the user has landed to the list component. Here I am using useHistory() hook.

-For example, let's say the user been routed to 'list' component with '/list' path, from 'home' component with '/' path. When the user clicks on the 'go back' button, the user will be routed back to 'home' component.

The problem is, it seems that react router remembers all the navigation history within the '/list' path, and will route back to URLs with parameters. For example, instead of routing the user back to '/' path, it will route back to '/list/abc/', '/list/xyz', etc. Understandably, this is bad user experience.

What will be the trick/method to bypass the URL parameters and go straight back to the previous component? Here is the code for top row component that I am using and declaring useHistory() hook.

import React from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import { useHistory } from "react-router-dom"

function ListTopRow() {

   let history = useHistory();

   return(
    <div className="top_row">
            <div className="goback">
                <FontAwesomeIcon icon={faChevronLeft} onClick={()=>{history.goBack()}}/>
            </div>
    </div>
    );
 }

 export default ListTopRow;

Any advice? Thanks a lot in advance!

EDIT: In case anyone is interested, I resolved this issue by storing history length as a state when the component loads, and combine with history.length to do exactly what I intended.:

import {React, useState, useEffect} from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import { useHistory } from "react-router-dom"

function ListTopRow() {
   const [historycount, sethistorycount] = useState(null);

   let history = useHistory();

   useEffect(()=>{
       sethistorycount(history.length);
   },[])

   return(
    <div className="top_row">
            <div className="goback">
                <FontAwesomeIcon icon={faChevronLeft} onClick={()=>{history.goBack(historycount-history.length-1)}}/>
            </div>
    </div>
    );
 }

 export default ListTopRow;

Upvotes: 0

Views: 1218

Answers (1)

Enchew
Enchew

Reputation: 1001

Why do you need back functionality? Isn't redirecting to a particular address more useful to you? Try the following:

import React from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import { useHistory } from "react-router-dom"

function ListTopRow() {

   let history = useHistory();

   return(
    <div className="top_row">
            <div className="goback">
                <FontAwesomeIcon icon={faChevronLeft} onClick={()=>{history.push('/')}}/>
            </div>
    </div>
    );
 }

 export default ListTopRow;

Hope that I have understood you correctly and this helps.

EDIT: Now I got your point, I'll get back with an answer soon.

Upvotes: 1

Related Questions