React路由Redirect跳转后浏览器返回按钮无法回到上一组件问题

点击CONTINUE按钮后，isClicked状态被设置为true并持久保留在App组件的内部状态中。当你点击浏览器返回按钮时，地址会先回退到根路径/，此时App组件触发重新渲染，但因为isClicked仍然为true，<Redirect>组件会被再次渲染，直接执行重定向逻辑跳回/documents，相当于回退操作被立刻覆盖，视觉上就表现为地址栏没有变化、无法回到App组件。

• 打开React DevTools，定位到App组件，点击返回按钮时观察isClicked状态是否始终为true，确认状态未重置是核心诱因
• 临时注释App组件内的<Redirect>相关代码，点击返回按钮观察地址栏是否能正常回到/，排除其他路由配置错误的可能
• 在App组件的渲染逻辑中加入console.log(location.pathname)，确认点击返回时路径确实先变为/再被重定向回/documents

方案1（推荐）：改用命令式跳转替换声明式Redirect #

<Redirect>是声明式组件，只要组件被渲染就会执行跳转逻辑，更适合路由匹配时的默认重定向场景，这种用户交互触发的跳转更适合用命令式API实现，不需要额外维护状态：

// App.tsx 修改后代码
import { useHistory } from 'react-router-dom' // react-router v5 写法，如果是v6版本替换为useNavigate

function App() {
    const history = useHistory();
    // 移除isClicked相关状态
    return (
        <div className="App">
            <GetStarted buttonClicked={() => history.push('/documents')} />
        </div>
    );
}

GetStarted组件无需修改，原有逻辑可直接复用。

方案2：保留Redirect的前提下监听路径重置状态 #

如果一定要用声明式Redirect的写法，可监听路由路径变化，当回到根路径时重置isClicked状态：

// App.tsx 修改后代码
import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'

function App() {
    const [isClicked, setIsClicked] = useState(false);
    const location = useLocation();

    // 监听路径变化，回到根路径时重置状态
    useEffect(() => {
        if(location.pathname === '/') {
            setIsClicked(false)
        }
    }, [location.pathname])

    return (
        <div className="App">
            <GetStarted buttonClicked={setIsClicked} />
            {isClicked && <Redirect from="*" to="/documents" />}
        </div>
    );
}

内容的提问来源于stack exchange，提问作者smilebomb