在 "react-router-dom": "^5.3.3" MemoryRouter 頁面重新加載后不恢復上次訪問的 url 路徑？

Question

頁面重新加載后不恢復 react-router-dom 中上次訪問的 url 路徑/頁面，並期望在頁面重新加載后恢復上次訪問的 url 路徑

導航.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

我已經使用一些邏輯通過以下方式實現了相同的目的

第 1 步：當用戶單擊導航按鈕時，我們需要將路徑存儲在本地存儲中

步驟2：頁面重新加載后需要從localstorage獲取最后訪問的路徑名，並使用useEffect和history對象通過以下方式恢復之前的路徑

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>
    )
}