反应路由器不更新子组件参数

Question

在我的React应用程序中，我在基于道具进行子组件更新时遇到了问题。子组件从暴露于存储状态的<Link/>标签中获取道具

const CallPortfolioManagement= (props) => {
const { portfolio } = props;
return (
<div>
<Link
to={{pathname: `/portfolios/${portfolio.name}`,state: { portfolio: portfolio},}}>
{portfolio.name}</Link>
</div>
);
};

const mapStateToProps = (state) => {
return {
portfolio: getPortfolio(state),
};
};
export default connect(mapStateToProps)(CallPortfolioManagemnt);

投资组合管理组件是：

const PortfolioManagement = (props) => {
const portfolio = useLocation().state.portfolio;
return (
<> 
{portfolio.stocks.map((stock, index) => (
<div key={stock.symbol}>
<h1>
{stock.symbol}
</h1>
</div>
))}
</>
);
};
export default PortfolioManagement;

一种直接订阅状态并在添加新股票符号时重新应答的组件：

const RenderLastStock= (props) => {
const renderLast () => {
var stocks;
if (props.portfolio) {
stocks = props.portfolio["stocks"];
return <button>{stocks[stocks.length - 1]].symbol}</button>;
}
};
return (
<>
renderLast ()}
</>
);
};
const mapStateToProps = (state) => {
return { tasks: getLoadingTasks(state), portfolios: getPortfolios(state) };
};
export default connect(mapStateToProps)(RenderLastStock);

在此处声明的路线，单击时调用PortfolioManagement：

function App(props) {
useEffect(() => {
props.getPortfolios();
}, []);
return (
<Router>
<div className="App">
<Switch>
<PrivateRoute>     
<Route path="/portfolios/:id" component={PortfolioManagement} />
</PrivateRoute>
</Switch> </div>
</Router>
);
}

问题是PortfolioManagement获取params，但在状态更改时不会重新发布-当我添加股票符号时。我用Object.assign更新了商店的状态，订阅了该状态的其他组件也会重新发布(因此不存在任何不变性问题(

查看redux devtools，我可以看到状态更新正确，我怀疑PortfolioManagement没有重新发布，因为react没有将Link的Params作为道具，也不知道它应该触发重新发布。

请帮忙：(

Answer 1

您可以在PortfolioManagement-中使用withRouter，而不是使用useLocation

---

import { withRouter } from 'react-router-dom'
const PortfolioManagement = (props) => {
console.log(props.location && props.location.state) 
...rest code...
}
export default withRouter(PortfolioManagement);

---

我知道它的技巧，但无论如何，现在state来自props，组件将重新渲染

编辑

Link和您可以发送的state位置对象的使用方式是，如果没有通过链接调用组件，上下文将不存在，请考虑在Router装饰处通过常规道具发送道具(我假设是连接到redux存储的组件(

<Route path="/portfolios/:id" render={()=> <PortfolioManagement props={...props} />} />

---

Answer 2

没有找到react路由器的解决方案，我通过作弊和让portfolioManagement直接访问商店来解决它