react-router V4 中基于 URL 的模式 [英] URL based modal in react-router V4

问题描述

我正在尝试完成此模式:

I am trying to accomplish this modal:

我想渲染我的图片库，当点击图片时，需要打开弹出窗口.我想用网址而不是状态/商店更改来做到这一点.例如:

I want to render my image gallery, and when clicking on an image, the popup needs to be opened. I want to do it with urls and not with state/store changes. for example:

链接:/gallery/popular/fhoeuwy3928"将在后面呈现画廊，在前面呈现弹出窗口.

the link : "/gallery/popular/fhoeuwy3928" will render the gallery in the back and the popup in front.

在 react-router 3 中，嵌套路由很简单.我如何使用 v4 做到这一点?

In react-router 3 it was simple with nested routes. How can I do it with v4?

这些是我目前的路线:

<Route exact path='/' component={Home}/>
<Route path='/gallery/:category' component={Gallery}/>
<Route path='/gallery/:category/:id' component={Popup}/>

推荐答案

好吧，我最终是这样安排路线的:

Well, This is how I arranged the routes eventually:

MainView.js

MainView.js

 <Switch>
    <Route path='/gallery/:category' component={Gallery} /> 
 </Switch>

画廊.js

  <Switch>
     <Route path={`${this.props.match.url}/:id`} component={Popup} />
  </Switch>

这篇关于react-router V4 中基于 URL 的模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！