Reactjs react路由器V4中基于URL的模式

我正在努力实现这一模式：

我想渲染我的图像库，当单击图像时，需要打开弹出窗口。 我想用URL，而不是状态/存储更改。 例如：

链接：“/gallery/popular/fhoeuwy3928”将在后面呈现画廊，在前面呈现弹出窗口

在react router 3中，嵌套路由非常简单。我如何使用v4实现它

以下是我目前的路线：

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

这里有一个很好的例子，在
React Router v4
文档中

它在那里解释得很好，但无论如何-那里的主要内容是
组件，如果在模态中打开的图像将保持
位置
属性不变，而我们可以打开模态“窗口”，以防需要或我们不输出任何内容：

{isModal？:null}

附言

决定在这里给出答案，尽管可能已经太晚了

最近面临同样的问题，打算从
v2
改为
v4
，花了几个小时，试图自己解决（但很明显，这是在文档中，愚蠢的我），希望这会有帮助

MainView.js

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



Gallery.js

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


概述
用这个，我把

工作原理
我们想要的是有一个嵌套的路由，可以在上面打开一个模式，我们想要这个模式有一个路由。因此，我们通过为“gallery”路径设置多个
路径来解决这个问题-一个用于gallery本身，另一个用于modal

然后，我们只需要为模态本身添加一个
。这允许直接深度链接到模式本身（同时确保在后台加载库）并从库导航到模式

<div>
    <Switch location={background || location}>
        <Route exact path="/" children={<Home />} />
        {/* The key is to have multiple paths here */}
        <Route path={["/gallery", "/img/:id"]} children={<Gallery />} />
    </Switch>

    <Route path="/img/:id" children={<Modal />} />
</div>


{/*关键是这里有多条路径*/}
目前是否存在任何问题？另外，您能显示弹出组件网代码吗？我使用了这种方法，但发现每次打开modal时，底层组件都会被重新加载，有没有办法避免这种情况？（图像列表的重新渲染）：）当然，关闭模式会触发相同的重新渲染。@Lukasz'Severiaan'Grela有趣的问题，看起来当操作通过react路由器的组件时，它会重新渲染所有的图像stuff@Lukasz“Severiaan”Grela是演出受到严重影响，还是你只是感兴趣？更感兴趣；）然而，我注意到，当图像通过OneError处理程序应用默认图像时，存在网络问题，导致回退图像不可用，它落在无限循环中，并且所有图像都闪烁。