import React from 'react'
import ReactDOM from 'react-dom'
import {
HashRouter,
Route,
Link,
Prompt,
Switch
} from 'react-router-dom'
const Other = ({location})=>(
<h3>没有这个地址……{location.pathname}</h3>
)
export default class App extends React.Component {
render(){
return(
<HashRouter>
<div>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/one">第一页</Link></li>
<li><Link to="/two">第二页</Link></li>
</ul>
<Switch>
{/* 渲染第一个被location匹配到的并且作为子元素的<Route>或者<Redirect>,
当找到匹配的<Route>后会停止继续匹配 */}
<Route path="/" exact render={()=><h3>首页</h3>}/>
<Route path="/one" render={()=><h3>One</h3>}/>
<Route path="/two" render={()=><h3>Two</h3>}/>
<Route component={Other}/>
{/* 不存在的url跳转渲染Other这个404组件 */}
</Switch>
</div>
</HashRouter>
)
}
}
ReactDOM.render(<App/>,document.getElementById("app"))