React-router V4 中基于 URL 的模式

Question

我正在尝试完成这个模式：

我想渲染我的图片库，当单击图像时，需要打开弹出窗口。我想用 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}/>

Answer 1

这里有一个很好的例子，在React Router v4文档中https://reacttraining.com/react-router/web/example/modal-gallery

它在那里解释得很好，但无论如何 -<Switch>组件的主要内容是，如果以模式打开的图像将保持location属性相同，而我们可以打开模式“窗口”，以防万一需要或我们不输出任何内容：

{isModal ? <Route path='/img/:id' component={Modal} /> : null}

聚苯乙烯

决定在这里给出答案，尽管可能为时已晚

最近遇到了同样的问题，旨在从 改为v2，v4花了几个小时，尝试自己解决它（但是，显然，它在文档中，愚蠢的我），希望这会有所帮助

Answer 2

概述

使用反应路由器模式示例，这是我放在一起的沙箱。

怎么运行的

我们想要的是有一个嵌套的路线，可以在其上打开一个模态，并且我们希望该模态有一个路线。因此，我们通过为“画廊”路线设置多个 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>

Answer 3

嗯，这就是我最终安排路线的方式：

MainView.js

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

Gallery.js

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