React 路由器不更新子组件参数

Question

在我的 React 应用程序中，我无法根据 props 进行子组件更新。子组件从<Link/>暴露给存储状态的标签中获取道具const CallPortfolioManagement= (props) => {  const { portfolio } = props;  return (    <div><Linkto={{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获取参数但在状态更改时不会重新呈现- 当我添加股票代码时。我使用 Object.assign 更新商店的状态，订阅此状态的其他组件会重新渲染！（所以不存在任何不变性问题）查看 redux devtools 我可以看到状态已正确更新，我怀疑 PortfolioManagement 不会重新渲染，因为 react 没有将 Link 的 Params 称为道具并且不知道它应该触发重新渲染。

Answer 1

而不是使用useLocation，您可以使用withRouterat PortfolioManagement-

  import { withRouter } from 'react-router-dom'

  const PortfolioManagement = (props) => {

      console.log(props.location && props.location.state) 

   ...rest code...

 }

  export default withRouter(PortfolioManagement);

我知道它很hacky，但无论如何现在state来自props并且组件将重新渲染

编辑

您可以发送的位置对象的用法Link和state位置，如果未通过链接调用组件，则上下文将不存在，考虑在Router装饰时通过常规道具发送道具（我假设是连接到 redux 存储的组件）

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

Answer 2

没有找到反应路由器的解决方案，我通过作弊解决了它并让portfolioManagement直接访问商店