• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

227
Views
Modal routes in react-router

I tried to implement Modal router as in the react router example but It works when used with Link but it doesn't work when I try to use history.push. I am trying to implement multilevel modal with programmatically navigating through. Check the stack-blitz

// This works
<Link
  to={{
      pathname: `/img/${id}`,
      state: { background: location }
   }}
 >
   <Thumbnail color={color} />
   <p>{title}</p>
</Link>

// This doesn't
<a href="#" onClick={
  () => history.push({
      pathname: `/img/${id}`,
      state: { background: location }
  })
}>
    <Thumbnail color={color} />
    <p>{title}</p>
</div>

// My Router
<div>
  <Switch location={background || location}>
    <Route path="/" exact component={Home} />
    <Route path="/contacts" exact component={Contacts} />
  </Switch>

  {background && <Route path="/contact/:name" children={<Modal />} />}
</div>

How do I fix this to work without Link tag? What is the error in the code used?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I think this could be solved by adding event.preventDefault(). Because when you click on the link, whole page is reloaded and history.push() is never executed

<a href="#" onClick={
  (e) => { 
    e.preventDefault()
    history.push({
      pathname: `/img/${id}`,
      state: { background: location }
  }})
}>
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error