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