一、react-router的组件
1.路由器组件:<BrowserRouter> 、<HashRouter>
2.路由:<Route>
3.重定向:<Redirect>
4.路由连接: <Link>
5.导航路由连接:<NavLink>
6.交换路由:<Switch>
里面可以包换多个<Route>
二、路由组件和非路由组件
拆分组件的时候会把路由组件(views)和非路由组件分开写,写在不同的文件夹里。
路由组件:就是对应一个路由地址的组件。
非路由组件:就是普通的组件。
三、路由结构
一级路由、二级路由、三级路由
四、源代码
一级路由
app.jsx:
import React,{Component} from 'react'
import {Swithch,Route,Redirect, NavLink, Switch} from 'react-router-dom'
import Home from '../views/home'
import About from '../views/about'
export default class App extends Component{
render(){
return(
<div>
<div><h1>Router</h1></div>
<div>
<NavLink to='/about'>About</NavLink>
<NavLink to='/home'>Home</NavLink>
</div>
<div>
<Switch>
<Route path='/about' component={About}></Route>
<Route path='/home' component={Home}></Route>
<Redirect path='/about' component={About}></Redirect>
</Switch>
</div>
</div>
)
}
}
二级路由
home.jsx:
import React,{Component} from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom'
import Page from './page'
import Take from './take'
export default class Home extends Component{
render(){
return(
<div>
<div>content:Home</div>
<div>
<NavLink to='/home/page'>Page</NavLink>
<NavLink to='/home/take'>Take</NavLink>
</div>
<div>
<Switch>
<Route path='/home/page' component={Page}></Route>
<Route path='/home/take' component={Take}></Route>
<Redirect path='/home/page' component={Page}></Redirect>
</Switch>
</div>
</div>
)
}
}
about.jsx:
import React,{Component} from 'react'
export default class About extends Component{
render(){
return(
<div>content:About</div>
)
}
}
page.jsx:
import React,{Component} from 'react'
export default class Page extends Component{
render(){
return(
<div>content:Page</div>
)
}
}
take.jsx:
import React,{Component} from 'react'
export default class Take extends Component{
render(){
return(
<div>content:Take</div>
)
}
}