In "react-router-dom": "^5.3.3" MemoryRouter after page reload not restore last visited url path?

Question

After page reload not restore last visited url path / page in react-router-dom and expecting to restore last visited url path after page reload

Nav.js

import React from 'react'
import { Link, useLocation } from 'react-router-dom'



const NavLinks = props => {
    const pathname = useLocation().pathname

    
    return (
        <nav>
            <ul className={classes.navlinks}>
                <li>
                    <Link
                        className={`${pathname === '/home' ? classes.active : classes.link}`}
                        to='/home'
                        onClick={handlePath}
                    >
                        {width > 1150 ? 'Home' : ''}
                        <Tooltip {...{
                            placement: 'bottom',
                            title: 'Home'
                        }}>
                            <Badge>
                                <IconButton style={{padding: '2px'}}>
                                    <TrendingUpOutlinedIcon />
                                </IconButton>
                            </Badge>
                        </Tooltip>
                    </Link>
                </li>
                <li>
                    <Link
                        className={`${pathname === '/about' ? classes.active : classes.link}`}
                        to='/about'
                        onClick={handlePath}
                    >
                        {width > 1150 ? 'About' : ''}
                        <Tooltip {...{
                            placement: 'bottom',
                            title: 'About'
                        }}>
                            <Badge>
                                <IconButton style={{padding: '2px'}}>
                                    <ConfirmationNumberOutlinedIcon />
                                </IconButton>
                            </Badge>
                        </Tooltip>
                    </Link>
                </li>
            </ul>
        </nav>
    )
}

Answer 1

I have used some logic to achieved the same in the following way

step 1: when ever user click the nav button we need to store the path in the local storage

step 2: After page reload need to get last visited path name from localstorage and used useEffect and history object to restored the previous path in the following way

import React from 'react'
import { Link, useLocation, useHistory } from 'react-router-dom'



const NavLinks = props => {
    const pathname = useLocation().pathname
    const history = useHistory()
    const [ navChanged, setNavChanged ] = React.useState(false)

    const handlePath = React.useCallback(() => {
        setNavChanged(true)
    }, [ ])
    React.useEffect(() => {
        if (navChanged) {
            localStorage.setItem('path', pathname)
        }
    })
    React.useEffect(() => {
        history.push(localStorage.getItem('path') || 'home')
    }, [])
    return (
        <nav>
            <ul className={classes.navlinks}>
                <li>
                    <Link
                        className={`${pathname === '/home' ? classes.active : classes.link}`}
                        to='/home'
                        onClick={handlePath}
                    >
                        {width > 1150 ? 'Home' : ''}
                        <Tooltip {...{
                            placement: 'bottom',
                            title: 'Home'
                        }}>
                            <Badge>
                                <IconButton style={{padding: '2px'}}>
                                    <TrendingUpOutlinedIcon />
                                </IconButton>
                            </Badge>
                        </Tooltip>
                    </Link>
                </li>
                <li>
                    <Link
                        className={`${pathname === '/about' ? classes.active : classes.link}`}
                        to='/about'
                        onClick={handlePath}
                    >
                        {width > 1150 ? 'About' : ''}
                        <Tooltip {...{
                            placement: 'bottom',
                            title: 'About'
                        }}>
                            <Badge>
                                <IconButton style={{padding: '2px'}}>
                                    <ConfirmationNumberOutlinedIcon />
                                </IconButton>
                            </Badge>
                        </Tooltip>
                    </Link>
                </li>
            </ul>
        </nav>
    )
}