リアクタールータv4モーダル

Question

私は以前のバージョンのリアクタールータでそれを行う方法を知っていますが、私は新しいリアクタールータv4でこれを行う方法を絶対に知りません。誰かが私を助けることができますか？

何が欲しいですか？

1. ブラウザのURLに/ image/1と入力すると、ページが通常どおり表示されます。
2. modal: trueの状態で<Link>Image as modal</Link>をクリックすると、画像付きのモーダルが表示されますが、ブラウザの以前のコンテンツ+ URLでなければなりません===/image/1 ... Then 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/

でいくつかの簡単な例があり、それがお役に立てば幸いです。