React router не обновляет параметры подкомпонентов

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);

компонент PortfolioManagement:

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 и другие компоненты, которые подписаны на это состояние, перерисовываются! (так что никаких проблем с неизменностью не возникает)

, просматривая излишние devtools, которые я могу Если состояние обновлено правильно, я подозреваю, что PortfolioManagement не выполняет повторную визуализацию, потому что реакция не ссылается на параметры ссылки как на реквизиты и не знает, что она должна вызывать повторную визуализацию.

, пожалуйста, помогите: (

Answer 1

не нашел решения с реагирующим маршрутизатором, я решил его путем обмана и предоставил портфолиоManagement прямой доступ к магазину

Answer 2

вместо useLocation, вы можете использовать withRouter в PortfolioManagement -

---

  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 украшении (я предполагаю, что это компонент, подключенный к хранилищу приращений)

---

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

---