import React, {Component} from 'react';
import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom'
import Top from './Top'
import About from './About'
import Article from './Article'
class App extends Component {
render(h) {
const current = {color: 'Red'}
return (
<Router>
<div className="App">
<ul>
<li><NavLink exact to="/" activeStyle={current}>Top</NavLink></li>
<li><NavLink to="/about" activeStyle={current}>About</NavLink></li>
<li><NavLink to="/article/1" activeStyle={current}>Article No.1</NavLink></li>
<li><NavLink to="/article/2" activeStyle={current}>Article No.2</NavLink></li>
</ul>
<Switch>
<Route exact path="/" component={Top} />{/* exactで正確にマッチしたpathに限定 */}
<Route path="/about" component={About} />
<Route path="/article/:id" component={Article} />
{/* 全てにマッチしない場合はトップページを表示 */}
<Route component={Top} />
</Switch>
</div>
</Router>
)
}
}
export default App