Реагируйте модально, который изменяет параметры динамически

Question

Я работаю над проектом с использованием React. Компоненты являются функциональными компонентами, использующими перехватчики реакции / маршрутизатора / избыточности. Я пытаюсь создать модал, который будет отображать динамическое содержимое c И URL должен обновляться в зависимости от параметров. Я создал модал, и он отображается при нажатии, но я не могу понять, как заставить его обновляться с помощью параметров маршрута. Я использую Redux для отслеживания идентификатора, который является параметром для маршрутизации к этому элементу. В основном, эта функциональность https://reacttraining.com/react-router/web/example/modal-gallery

APP

    function App() {

  let location = useLocation()
  console.log(location)

     let background = location.state && location.state.background;

  return (
    <Provider store={store}>
      <Navbar/>
      <Switch location={background || location}>
        <Route exact path='/' children={<Home/>}/>
        <Route exact path='/meals' children={<Meals/>}/>
        <Route exact path='/meals/:mealId' children={<MealDetail/>}/>
      </Switch>
            {background && <Route path='/meals/:mealId' children={<Portal />} />}
      </Provider>
       );
    }

PORTAL

const Portal = ({open,close,modalText, name, category, foto, area, }) =>{
const classModal = open ? "modal--open" : "modal--close"

return(
    <div className={classModal}>
        <div className="modal">
            <span className="close" onClick={close}>X</span>
                <h2 className='modal-title'>{name}</h2>
                <p className='modal-cat'>{category}</p>
                <img className='modal-img' src={foto} alt={name}/>
                <p className='modal-title'>{area}</p>
            <span className="modalText">{modalText}</span>
        </div>
    </div>
)

}

DISPLAY MODAL

const RandomMeals = ({rando}) => {
let location = useLocation();
const dispatch = useDispatch()

const {strMeal, idMeal, strCategory, strArea, strMealThumb} = rando

const [open,setOpen] = useState(false)
const openModal = () => {          
setOpen(true)
}

const onCloseModal = () =>{
setOpen(false)
}

  return (
        <div className='rando-container'>
            <p className='rando-title'>{strMeal}</p>
            <div className='imgContainer'>
                <img className='rando-viz' src={strMealThumb} alt={strMeal}/>
            </div>
            <p className='rando-cat'>{strCategory}</p>
            <p>{strArea}</p>
            <button className='btn-detail' onClick={()=>dispatch(getMeal(rando))}>
                <Link to={`/meals/${idMeal}`}>View More</Link> 
            </button>
            <button onClick={openModal} className='modal-btn'>Quick View</button>
            <ModalWrapper 
                idMeal={idMeal}
                open={open} 
                rando={rando}
                name={strMeal} 
                category={strCategory} 
                area={strArea}
                foto={strMealThumb}
                close={onCloseModal}/>
        </div>
    )
}