反应路由器中的模态路由

Question

我尝试在react 路由器示例中实现 Modal 路由器，但它在与Link一起使用时有效，但当我尝试使用history.push时它不起作用。 我正在尝试通过以编程方式导航来实现多级模式。 检查堆栈闪电战

// 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>

如何在没有Link标签的情况下解决此问题？ 使用的代码有什么错误？

Answer 1

我认为这可以通过添加 event.preventDefault() 来解决。 因为当你点击链接时，整个页面会重新加载并且 history.push() 永远不会执行

<a href="#" onClick={
  (e) => { 
    e.preventDefault()
    history.push({
      pathname: `/img/${id}`,
      state: { background: location }
  }})
}>