React不会在路线改变时触发
React不会在路线改变时触发
提问于 2019-09-18 06:31:36
我希望每次路由改变时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;回答 4
Stack Overflow用户
回答已采纳
发布于 2019-09-18 09:18:00
不会触发useEffect，因为App组件没有重新呈现，该组件中没有任何更改(没有状态或支持更新)。
如果希望在路由更改时重新呈现App组件，可以使用withRouter HOC注入路由支持，如下所示：
import { Switch, Route, withRouter } from 'react-router-dom';
const App = () => {
useEffect( () => console.log('Refresh'));
return (...);
}
export default withRouter(App);Stack Overflow用户
发布于 2020-02-16 17:40:24
使用key属性，所以每次我们呈现新组件时(不同的键)
<Route path='/mypath/:username' exact render= {routeProps =><MyCompo {...routeProps} key={document.location.href} />} />Stack Overflow用户
发布于 2020-06-17 06:24:53
使用useEffect的第二个参数来有条件地应用效果。例如，通过反应性路由器-dom，您可以获得一些属性。
const { schoolId, classId } = props
useEffect(() => {
// fetch something here
}, [schoolId, classId)在这里，[schoolId, classId充当useEffect要触发的唯一标识符。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57986395
复制相关文章
相似问题
腾讯云开发者
