React Router
1.Router
Router我们可以把它看做是react路由的一个路由外层盒子,它里面的内容就是我们单页面应用的路由以及路由组件。
import { BrowserRouter as Router } from "react-router-dom";
class Main extends Component{
render(){
return(
<Router>
<div>
//otherCoding
</div>
</Router>
)
}
}
2.Link
Link是react路由中的点击切换到哪一个组件的链接,(这里之所以不说是页面,而是说组件,因为切换到另一个界面只是展示效果,react的本质还是一个单页面应用)
import { BrowserRouter as Router, Link} from "react-router-dom";
class Main extends Component{
render(){
return(
<Router>
<div>
<ul>
<li><link to='/'>首页</Link></li>
<li><link to='/other'>其他页</Link></li>
</ul>
</div>
</Router>
)
}
}
第一、Router下面只能包含一个盒子标签,类似这里的div。
第二、Link代表一个链接,在html界面中会解析成a标签。作为一个链接,必须有一个to属性,代表链接地址。这个链接地址是一个相对路径。
第三、Route,是下面要说的组件,有一个path属性和一个组件属性(可以是component、render等等)
3.Route
Route代表了你的路由界面,path代表路径,component代表路径所对应的界面。
import React,{ Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class Home extends Component{
render(){
return (
<div>this a Home page</div>
)
}
}
class Other extends Component{
render(){
return (
<div>this a Other page</div>
)
}
}
class Main extends Component{
render(){
return (
<Router>
<div>
<ul>
<li><Link to="/home">首页</Link></li>
<li><Link to="/other">其他页</Link></li>
</ul>
<Route path="/home" component={Home}/>
<Route path="/other" component={Other}/>
</div>
</Router>
)
}
}
render(<Main />,document.getElementById("root"));