react-router-dom学习心得1.0

import React,{Component} from "react";
import {render} from "react-dom";
import {BrowserRouter,Route,Link,Switch,Redirect} from "react-router-dom";

function Home(){
return (
<p>this is home</p>
)
}
function About(){
return (
<p>this is About</p>
)
}
function Topic(){
return (
<p>this is Topic</p>
)
}

class App extends Component{

render(){
return (
<BrowserRouter>
<div>
<ul>
<li><Link to="/home">HOME</Link></li>
<li><Link to="/about">ABOUT</Link></li>
<li><Link to="/topic">TOPIC</Link></li>
</ul>

{/*定义了页面一打开，去到哪个路由里*/}
<Redirect to="/about"></Redirect>

{/*exact 属性 精确匹配 只匹配"/" ,
而不会把"/home"，"/about"，"/topic"都匹配上*/}
<Switch>{/*Switch标签 只匹配单个路由*/}
<Route path="/" component={Home} exact></Route>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/topic" component={Topic}></Route>
</Switch>

</div>

</BrowserRouter>

)
}
}

render(<App />,document.getElementById("root"));