1、安装
cnpm install -S react-router-dom@4.3.1
2、引入
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
可以使用as xx重命名BrowserRouter
3、BrowserRouter可以有多个,但其中的路由只能是一个或用一个根容器包裹多个路由
其中BrowserRouter属性:
basename='/路径'
添加basename='/xx'后,点击Link跳转其他路由时,url会将/xx添加到路由名前,
所以使用原本路由路径和加了/xx的路由路径都能匹配该路由
4、路由中的组件route中的component={中},除了可以放置组件显示路由内容,还可以
通过函数返回html内容来显示路由内容,因为组件也是返回html内容,故可以直接通过函数返
回html内容充当组件,但不能直接写html内容
如:
<Route path="/product" component={()=><div>product</div>}></Route>
<Route path="/" component={function(){return <div>首页2</div>}}></Route>
代码示例:
import React,{Component} from 'react'
//import {Route,BrowserRouter,Link} from 'react-router-dom'
//将BrowserRouter重命名为Router
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
import { Button } from 'antd';
import './App.css';
function Home()
{
return(
<div>admin首页</div>
)
}
function Me()
{
return(
<div>admin我的</div>
)
}
function Product()
{
return(
<div>admin产品页面</div>
)
}
export default class App extends Component{
constructor()
{
super();
}
render()
{
return(
<div id='app'>
{/*BrowserRouter可以放多个*/}
<Router>
{/*因为组件也是返回html内容,故可以直接通过函数返回html内容充当组件,但不能直接写html内容*/}
<div>
<Route path="/" exact component={()=><div>首页</div>}></Route>
<Route path="/product" component={()=><div>product</div>}></Route>
<Route path="/me" component={()=><div>me</div>}></Route>
</div>
{/*<Route path="/" component={function(){return <div>首页2</div>}}></Route>*/}
</Router>
{/*BrowserRouter内部只能有一个根容器,包裹其他内容*/}
{/*添加basename='/xx'后,点击Link跳转其他路由时,url会将/xx添加到路由名前,所以使用路由路径和加了admin的路由路径都能匹配该路由*/}
<Router basename='/admin'>
<div>
<div className='nav'>
<Link to='/'>Home</Link>
<Link to='/product'>Product</Link>
<Link to='/me'>个人中心</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" exact component={Me}></Route>
</div>
</Router>
</div>
)
}
}