我有我的App.js文件结构的方式，其中页眉和页脚始终存在，无论用户在页面。问题是，当用户在并行组件中修改一些数据时，链接将用户转移到默认页面，但标题中的数据没有被修改。只有在用户设置了其他组件中的操作后刷新页面时，头部才会更新。如果有帮助，数据来自localStorage。我试过道具钻，也试过和州政府打交道，但都不成功。以编程方式刷新页面也会产生我不想要的行为。
要修改数据的路由是<Route path="/item/:id" render={(props) => <Item {...props} />}/>
这是app.js文件:
App.js文件
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
function App(){
const currentYear = new Date().getFullYear();
return (
<Router>
<Header/> {/* <-- ALWAYS PRESENT */}
<Switch>
<Route path='/' exact component={Products} />
<Route path='/contact' component={Contact}/>
<Route path='/cart' component={Cart}/>
<Route path="/item/:id" render={(props) => <Item {...props} />}/>
</Switch>
<Footer date={currentYear} /> {/* <-- THIS AS WELL */}
</Router>
)
}
如果有人想在Header或Item组件中看到代码的结构，请让我知道，但我想知道是否有一种方法React Router可以处理这些类型的动作。
React组件只能呈现它们知道的数据。这些数据由它们的道具和状态组成。当出现一些副作用时，您可以更新数据并对组件进行反应渲染。如果你想在组件之间共享数据，你可以通过三种方式来实现——将数据存储在树的更高位置，使用专用的数据管理解决方案或以某种方式复制数据。
考虑到你的情况，你有三个选择。首先是保持你的组件对App感兴趣的数据。其次是使用一些外部状态管理解决方案，并以一种解决方案工作的方式来做。
由于您将这些数据保存在localStorage中，因此您有第三个选择。在header中，您可以订阅localStorage更改并更新header的状态。注意，简单地在每次渲染时将localStorage中的所有内容放入状态可能会很昂贵，所以请尝试仅在数据肯定更改时才这样做。