我正在尝试完成此模式：
我想渲染我的图片库，当点击图片时，需要打开弹出窗口。我想用网址而不是状态/商店更改来做到这一点。例如：
链接：“/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文档https://reacttraining.com/react-router/web/example/modal-gallery
它在那里得到了很好的解释，但无论如何 -<Switch>组件的主要内容，如果在模态中打开的图像将保持location属性不变，而我们可以打开我们的模态“窗口”，以防万一，或者我们不输出任何内容：
{isModal ? <Route path='/img/:id' component={Modal} /> : null}
聚苯乙烯
决定在这里给出答案，尽管可能为时已晚
最近面临同样的问题，打算从v2改为v4，花了几个小时，试图自己解决（但是，显然，它在文档中，我很傻），希望这会有所帮助
使用react-router模式示例，这是我放在一起的沙箱。
我们想要的是有一个嵌套的路由，它可以在上面打开一个模态，我们希望该模态有一个路由。因此，我们通过为“画廊”路线设置多个 paths解决了这个问题——一个用于画廊本身，另一个用于模态。
然后，我们只需要<Route>为模态本身添加一个附加项。这允许直接深层链接到模态本身（同时确保图库在后台加载）并从图库导航到模态。
<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>
好吧，这就是我最终安排路线的方式：
主视图.js
<Switch>
<Route path='/gallery/:category' component={Gallery} />
</Switch>
Gallery.js
<Switch>
<Route path={`${this.props.match.url}/:id`} component={Popup} />
</Switch>