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/

幾個簡單的例子希望它可以幫助：你會像下面這樣使用它。