[英]React Router v4 Modal
我知道如何在以前版本的 React Router 中做到这一点,但我绝对不知道如何在新的 React Router v4 中做到这一点。 有人可以帮助我吗?
modal: true
<Link>Image as modal</Link>
时,将会出现带有图像的模态,但模态后面必须是浏览器中的上一个内容 + url === /image/1... 那么如果你按F5,页面会正常显示。示例:instagram...等
代码:
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')
)
我遇到了同样的问题,所以我创建了:
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/有几个简单的例子
希望能帮助到你。
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
// This example shows how to render two different screens
// (or the same screen in a different context) at the same url,
// depending on how you got there.
//
// Click the colors and see them full screen, then "visit the
// gallery" and click on the colors. Note the URL and the component
// are the same as before but now we see them inside a modal
// on top of the old screen.
class ModalSwitch extends React.Component {
// We can pass a location to <Switch/> that will tell it to
// ignore the router's current location and use the location
// prop instead.
//
// We can also use "location state" to tell the app the user
// wants to go to `/img/2` in a modal, rather than as the
// main page, keeping the gallery visible behind it.
//
// Normally, `/img/2` wouldn't match the gallery at `/`.
// So, to get both screens to render, we can save the old
// location and pass it to Switch, so it will think the location
// is still `/` even though its `/img/2`.
previousLocation = this.props.location;
componentWillUpdate(nextProps) {
let { location } = this.props;
// set previousLocation if props.location is not modal
if (
nextProps.history.action !== "POP" &&
(!location.state || !location.state.modal)
) {
this.previousLocation = this.props.location;
}
}
render() {
let { location } = this.props;
let isModal = !!(
location.state &&
location.state.modal &&
this.previousLocation !== location
); // not initial render
return (
<div>
<Switch location={isModal ? this.previousLocation : location}>
<Route exact path="/" component={Home} />
<Route path="/gallery" component={Gallery} />
<Route path="/img/:id" component={ImageView} />
</Switch>
{isModal ? <Route path="/img/:id" component={Modal} /> : null}
</div>
);
}
}
const IMAGES = [
{ id: 0, title: "Dark Orchid", color: "DarkOrchid" },
{ id: 1, title: "Lime Green", color: "LimeGreen" },
{ id: 2, title: "Tomato", color: "Tomato" },
{ id: 3, title: "Seven Ate Nine", color: "#789" },
{ id: 4, title: "Crimson", color: "Crimson" }
];
function Thumbnail({ color }) {
return (
<div
style={{
width: 50,
height: 50,
background: color
}}
/>
);
}
function Image({ color }) {
return (
<div
style={{
width: "100%",
height: 400,
background: color
}}
/>
);
}
function Home() {
return (
<div>
<Link to="/gallery">Visit the Gallery</Link>
<h2>Featured Images</h2>
<ul>
<li>
<Link to="/img/2">Tomato</Link>
</li>
<li>
<Link to="/img/4">Crimson</Link>
</li>
</ul>
</div>
);
}
function Gallery() {
return (
<div>
{IMAGES.map(i => (
<Link
key={i.id}
to={{
pathname: `/img/${i.id}`,
// this is the trick!
state: { modal: true }
}}
>
<Thumbnail color={i.color} />
<p>{i.title}</p>
</Link>
))}
</div>
);
}
function ImageView({ match }) {
let image = IMAGES[parseInt(match.params.id, 10)];
if (!image) return <div>Image not found</div>;
return (
<div>
<h1>{image.title}</h1>
<Image color={image.color} />
</div>
);
}
function Modal({ match, history }) {
let image = IMAGES[parseInt(match.params.id, 10)];
if (!image) return null;
let back = e => {
e.stopPropagation();
history.goBack();
};
return (
<div
onClick={back}
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
background: "rgba(0, 0, 0, 0.15)"
}}
>
<div
className="modal"
style={{
position: "absolute",
background: "#fff",
top: 25,
left: "10%",
right: "10%",
padding: 15,
border: "2px solid #444"
}}
>
<h1>{image.title}</h1>
<Image color={image.color} />
<button type="button" onClick={back}>
Close
</button>
</div>
</div>
);
}
function ModalGallery() {
return (
<Router>
<Route component={ModalSwitch} />
</Router>
);
}
export default ModalGallery;
一个简单的模态路由示例,可以与任何路由系统一起使用
<button onClick={() => {
this.setState({ modal: true });
window.history.pushState("","","/gallery/image/img_1233")
}}>
Open Modal
</button>
//Link Button
<Link href="/gallery/image/img_1233">
<a>Open Page</a>
</Link>
完整示例: https : //github.com/mohammad-amin-hesam/react-modal-route-example
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.