Как при ссылке на страницу лист новостей открывать по айди новость в модальном окне?

class App extends React.Component { 
	state = { 
		news: [{ 
			id: 0, 
			title: "News 1", 
			detail: "Detail news 1" 
		}, 
		{ 
			id: 1, 
			title: "News 2", 
			detail: "Detail news 2" 
		}, 
		{ 
			id: 2, 
			title: "News 3", 
			detail: "Detail news 3" 
		} 
		], 
		modalOpen: false, 
		modalContent: -1, 
	} 
	openDetail = (event, id) => { 
		event.preventDefault(); 
		this.setState({ 
			modalContent: id, 
			modalOpen: true, 
		}) 
	} 
	closeModal= ()=>{ 
		this.setState({ 
			modalOpen:false, 
		}) 
	} 
	openModal = () => { 
		if(this.state.modalOpen && this.state.modalContent!==-1){ 
			return (<div className="modal">{this.state.news[this.state.modalContent].detail}<div onClick={this.closeModal} className="close">&times;</div></div>); 
		}else{ 
			return null; 
		} 
	} 
	printList = () => { 
		return (this.state.news.map((item,key) => { 
			return ( < div key = {key} > < a onClick = { 
				(event) => this.openDetail(event, key) 
			} 
			href = {`Link.ru#${key}`} 
			className = "list" > {item.title} 
			</a> 
			</div > ) 
		})); 
	} 
	render() { 
		return ( < div > {this.printList()} {this.openModal()} < /div>) 
	} 
} 
ReactDOM.render( < App / > , document.getElementById('root'));

.modal { 
  background: #ggg; 
  position: fixed; 
  width: 400px; 
  min-height: 100px; 
  max-height:100%; 
  top: 50%; 
  transform: translateY(-50%); 
  left: 50%; 
  margin-left: -200px; 
  border: 1px solid blue; 
} 
 
.close { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  font-size: 18px; 
  cursor: pointer; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
<div id="root"></div>