React Router部署Netlify后URL变化页面不更新如何解决

问题根因 #

• 你将Content组件嵌套定义在了App组件内部，生产构建后每次App组件重渲染都会重新创建Content组件实例，导致内部状态、useEffect监听逻辑全部重置，路由切换的判断逻辑失效。本地开发环境的热更新、开发模式组件复用逻辑掩盖了这个问题，因此仅在部署后出现异常。
• 你在useEffect中直接对比location对象的引用，生产环境下react-router-dom的location对象更新时可能出现引用不符合预期的情况，导致判断逻辑不触发。

修复步骤 #

1. 将Content组件从App组件内部移到外部独立定义，避免组件被重复创建。
2. 将location的引用对比替换为路径字符串对比，确保路由变化判断逻辑稳定触发。
3. 若调整后仍然异常，检查你的fade动画属性是否加了浏览器兼容前缀，避免生产构建后动画未触发导致onAnimationEnd回调不执行，无法更新渲染的路由。

修改后参考代码 #

App.jsx #

import React, { useEffect, useState } from 'react'
import About from './components/About'
import Contact from './components/Contact'
import Navbar from './components/Navbar'
import Projects from './components/Projects'
import Skills from './components/Skills'
import { Switch, Route, useLocation } from 'react-router-dom'

// 独立定义Content组件
function Content() {
    const location = useLocation()
    const [displayLocation, setDisplayLocation] = useState(location)
    const [transitionStage, setTransistionStage] = useState('fadeIn')

    useEffect(() => {
        // 替换为路径字符串对比
        const currentLocStr = `${location.pathname}${location.search}${location.hash}`
        const displayLocStr = `${displayLocation.pathname}${displayLocation.search}${displayLocation.hash}`
        if (currentLocStr !== displayLocStr) {
            setTransistionStage('fadeOut')
        }
    }, [location, displayLocation])

    return (
        <div
            className={`animate-${transitionStage}`}
            onAnimationEnd={() => {
                if (transitionStage === 'fadeOut') {
                    setTransistionStage('fadeIn')
                    setDisplayLocation(location)
                }
            }}
        >
            <Switch location={displayLocation}>
                <Route exact path='/' component={About} />
                <Route path='/projects' component={Projects} />
                <Route path='/skills' component={Skills} />
                <Route path='/contact' component={Contact} />
            </Switch>
        </div>
    )
}

const App = () => {
    return (
        <main className='relative lg:h-screen font-mulish text-gray-400 bg-gray-900 body-font overflow-x-hidden'>
            <Navbar />
            <Content />
        </main>
    )
}

export default App

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