react-path V4中基于URL的模态

Question

我正在努力完成这个模式：

我想渲染我的图片库，点击图片时，需要打开弹出窗口。 我想用网址而不是状态/商店更改。 例如：

链接：“/ 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 docs https://reacttraining.com/react-router/web/example/modal-gallery

中

它在那里得到了很好的解释，但无论如何 - <Switch>组件的主要内容，如果以模态打开的图像将保持location属性相同，而我们可以打开我们的模态＆＃34;窗口＆＃ 34;如果它需要或我们没有输出任何东西：

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

P.S。

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

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

Answer 2

概述

使用我放在一起的react router modal example，here is a sandbox。

工作原理

我们想要的是有一个嵌套的路线，可以在其上打开一个模式，而我们希望该模式具有一条路线。因此，我们通过为“图库”路线设置多个 path来解决此问题-一个用于画廊本身，另一个用于模态。

然后，对于模态本身，我们只需要再加上一个<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

tail -F x.txt

Gallery.js

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