React Router v4 Modal

Question

我知道如何在以前版本的React Router中完成它，但我完全不知道如何在新的React Router v4中完成它。有人能帮助我吗？

我想要什么？

1. 当您在浏览器url中输入/ image/1时，页面将会正常显示。
2. 当你点击<Link>Image as modal</Link>与modal: true状态，将出现模式与图像但后面的模式必须是浏览器中的前一内容+ url ===/image/1 ...然后如果按F5，页面将显示为正常。

例子：Instagram的...等

我怎么觉得我做错了吗？

1. 我不知道如何显示以前的内容。这就是我所想的。

代码：

const Images = (props) => { 
    return (
    <div> 
     <h2>Images</h2> 
     <ul> 
     <li><Link to={{ 
      pathname: '/image/1', 
      state: { 
      modal: true 
      } 
     }}>Image as modal</Link></li> 
     <li><Link to="/image/2">Image</Link></li> 
     </ul> 
    </div> 
) 
} 

const Image = (props) => { 
    return (
    <div> 
     <h2>Image {props.match.params.id}</h2> 
     <ul> 
     <li><Link to="/images">Back to Images</Link></li> 
     </ul> 
    </div> 
) 
} 

ReactDOM.render(
    <Provider store={store}> 
    <Router> 
     <div> 
     <Route path='/images' component={Images} /> 
     <Route path='/image/:id' component={Image} /> 
     </div> 
    </Router> 
    </Provider>, 
    document.getElementById('digital') 
) 

Answer 1

我有同样的问题，所以我创建：

http://npmjs.com/package/react-router-modal

它可以让你情态附加到路径。

import { ModalContainer, ModalRoute } from 'react-router-modal'; 
// ... 
ReactDOM.render(
    <Provider store={store}> 
    <Router> 
     <div> 
     <Route path='/images' component={Images} /> 
     <ModalRoute path='/image/:id' component={Image} /> 
     </div> 
    </Router> 
    <ModalContainer /> 
    </Provider>, 
    document.getElementById('digital') 
) 

有在https://davidmfoley.github.io/react-router-modal-examples/

几个简单的例子希望它可以帮助：你会像下面这样使用它。