React useEffect 不会在路由更改时触发

Posted 2023-02-22

【中文标题】React useEffect 不会在路由更改时触发

【英文标题】：React useEffect is not triggering on route change

【发布时间】：2020-01-19 00:50:22

【问题描述】：

我希望 console.log('Refresh') 在每次路由更改（从 Component1 切换到 Component2）时运行。但它只在第一次渲染时触发。为什么？

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import  BrowserRouter  from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

App.js：

import React,  useEffect  from 'react';
import  Switch, Route  from 'react-router-dom';
import Nav from './Nav';
import Component1 from './Component1';
import Component2 from './Component2';

const App = () => 

  useEffect( () => console.log('Refresh'));

  return (
        [<Switch>
            <Route                            component = Nav/>
        </Switch>,
        <Switch>
            <Route exact path = '/component1' component = Component1/>
            <Route exact path = '/component2' component = Component2/>
        </Switch>]
  );


export default App;

Nav.js：

import React from 'react';
import  Link  from 'react-router-dom';

const  Nav = () => 
  return (
    <div>
        <Link to = '/component1'>Component 1</Link>
        <Link to = '/component2'>Component 2</Link>
    </div>
  );


export default Nav;

Component1.js：

import React from 'react';

const  Component1 = () => 

  return (
    <div>
        <p>Hi</p>
    </div>
  );


export default Component1;

Component2.js：

import React from 'react';

const  Component2 = () => 
  return (
    <div>
        <p>Bye</p>
    </div>
  );


export default Component2;

【问题讨论】：

您的<Router> 组件在哪里？

在 index.js（问题已更新）。

【参考方案1】：

useEffect 未触发，因为 App 组件未重新渲染，该组件中没有任何更改（没有状态或道具更新）。

如果您希望App 组件在路由更改时重新渲染，可以使用withRouter HOC 注入路由道具，如下所示：

import  Switch, Route, withRouter  from 'react-router-dom';

const App = () => 

  useEffect( () => console.log('Refresh'));

  return (...);


export default withRouter(App);

例如：https://codesandbox.io/s/youthful-pare-n8p1y

【讨论】：

明白。很好的答案。

这并没有解决我的问题。在我的情况下，useEffect 按预期工作，直到我导航到不同的路线，然后返回当前路线，然后 useEffect 不会触发，似乎无论是否收听特定状态 var 都会发生。

@SonicSoul 你能用你的代码打开一个新问题吗？似乎是一个不同的问题。

自 2021 年路由器 V6 起使用此功能 ***.com/a/62389224/2394052

【参考方案2】：

使用 key 属性，所以每次我们渲染新组件（不同的 key）

<Route path='/mypath/:username' exact render= routeProps =><MyCompo ...routeProps key=document.location.href /> />

【讨论】：

你成就了我的一天。非常感谢

老实说最干净的解决方案，但是我的钥匙是 s-s-r 安全的道具，谢谢 Aliens

这应该是最佳解决方案。太棒了。

【参考方案3】：

使用 useEffect 的第二个参数有条件地应用效果。例如通过 react-router-dom，你可以获得一些属性

const  schoolId, classId  = props

useEffect(() => 
   // fetch something here
, [schoolId, classId)

这里[schoolId, classId作为useEffect触发的唯一标识符。