はまったのがreact-router、もともとはreact-routerという名前のモジュールだったのですがreact-router v4
からはWeb用とNative用にわかれており、Web用はreact-router-domという名前のモジュールを利用します。
以下のyarnコマンドでモジュールの入れ替えを行います。
yarn remove react-router
yarn add react-router-domnpmを利用している場合は以下のコマンドでモジュールの入れ替えを行うことができます。
npm uninstall react-router --save
npm install react-router-domimport React , { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
const Home = ()=>{
return <div>Home</div>
}
const Page1 = ()=>{
return <div>Page1</div>
}
const Page2 = ()=>{
return <div>Page2</div>
}
const Page3 = ()=>{
return <div>Page3</div>
}
class App extends Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/page1'>Page1</Link></li>
<li><Link to='/page2'>Page2</Link></li>
<li><Link to='/page3'>Page3</Link></li>
</ul>
<hr />
<div>
<Route exact path='/' component={Home} />
<Route path='/page1' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</div>
</div>
</Router>
);
}
}
export default App;
