const App = props => (
<div>
<Link to='/'><h1>App</h1></Link>
<Link to='/news'> News </Link>
<Link to='/about'> About </Link>
{props.children}
</div>
);
const Modal = props => (
<div>
<h3>Modal</h3>
<p>{props.data}</p>
<button onClick={props.onClick}>close</button>
</div>
);
const withModal = Component => props => (
<div>
<Component {...props} />
{props.params.id != undefined && <Modal data={props.params.id} onClick={() => {
props.router.goBack();
}}/>}
</div>
);
const News = withModal(props => (
<div>
<h2>News</h2>
<Link to='/news/1'>modal</Link>
{props.children}
</div>
));
const About = withModal(props => (
<div>
<h2>About</h2>
<Link to={{pathname: '/news/1', state: 'about'}}>modal</Link>
{props.children}
</div>
));
const modalStates = {
'about': About
};
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/' component={App}>
<Route path='news' component={News} />
<Route path='about' component={About} />
<Route path='news/:id' getComponent={(nextState, cb) => {
let Component = News;
const {state} = nextState.location;
if (state && state in modalStates) Component = modalStates[state];
cb(null, Component);
}} />
</Route>
</Router>,
document.body
);