前端之家收集整理的这篇文章主要介绍了
React五——React-router,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
路由
npm build
cnpm i serve -g
cnpm i react-router@3.0 -S
bogon:project macbook$ cnpm i react-router@3.0 -S
✔ Installed 1 packages
✔ Linked 23 latest versions
✔ Run 0 scripts
peerDependencies WARNING react-router@3.0 requires a peer of react@^0.14.0 || ^15.0.0 but react@16.1.0 was installed
✔ All packages installed (24 packages installed from npm registry,used 9s,speed 27.27kB/s,json 25(70.88kB),tarball 172.32kB)
bogon:project macbook$
npm start
构建
src下新建routes文件夹
创建routes.js文件
import React,{ Component } from 'react'
import { Router,Route,hashHistory } from 'react-router'
import Index from '../pages/Index'
import Position from '../pages/Position'
import Search from '../pages/Search'
import Mine from '../pages/Mine'
class App extends Component {
render() {
return(
<Router history = { hashHistory }>
<Route path="/" component={Index}>
<IndexRoute component={Position}></IndexRoute> //索引
<Route path="position" component={Position}/>
<Route path="search" component={Search}/>
<Route path="mine" component={Mine}/>
</Route>
</Router>
)
}
}
export default App
创建默认组件Index.js
src/pages/Index.js
创建子组件 进行路由跳转
import React,{ Component } from 'react'
class Mine extends Component {
render() {
return(
<div>mine</div>
)
}
}
export default Mine
壳:index.js
import React,{ Component } from 'react'
import {Link} from 'react-router'
class Index extends Component {
render() {
return(
<div>
<div>
<Link to={{pathname: '/position',query:{name:'alice'}}}>职位</Link>
<Link to="/search">搜索</Link>
<Link to="/mine">我的</Link>
</div>
<div>
{this.props.children}
</div>
</div>
)
}
}
export default Index
高亮
<IndexLink activeStyle={{color: 'red'}} to='/'>职位</IndexLink>
传参
(1)传:
<Link activeStyle={{color: 'red'}} to={{pathname:"/search",query:{name:'alice'}}}>搜索</Link>
收:
constructor(props){
super(props)
console.log(this.props.location.query.name)
}
(2)传:
<Link activeStyle={{color: 'red'}} to="/mine/3">我的</Link>
收:
constructor(props){
super(props)
console.log(this.props.params.id)
}
'mine/*'
'mine(/:id)'
redirect
<Redirect from='/' to="/position"></Redirect>
<Route path="/" component={Index}>
<Route path="position" component={Position}/>
<Route path="search" component={Search}/>
<Route path="mine/:id" component={Mine}/>
</Route>
<IndexLink activeStyle={{color: 'red'}} to='/position'>职位</IndexLink>
路由嵌套
<Router history = { hashHistory }>
<Redirect from='/' to="/position"></Redirect>
<Route path="/" component={Index}>
{/* <IndexRoute component={Position}></IndexRoute> */}
<Route path="position" component={Position}>
<Redirect from='/position/search' to="/search"></Redirect>
</Route>
<Route path="mine/:id" component={Mine}/>
</Route>
<Route path="/search" component={Search}/>
<Route path="*" component={Page404}></Route>
</Router>
/position/search的时候会重定向到/search 导航消失 可做详情页
404.js
import React,{ Component } from 'react'
class Page404 extends Component {
render() {
return(
<div>page not found</div>
)
}
}
export default Page404
routes.js
<Router history = { hashHistory }>
<Route path="/" component={Index}>
<IndexRoute component={Position}></IndexRoute>
<Route path="position" component={Position}/>
<Route path="search" component={Search}/>
<Route path="mine/:id" component={Mine}/>
</Route>
<Route path="*" component={Page404}></Route> //放到最后
</Router>
路由守卫
<!--安装 cnpm i --save react-mixin@2-->
class App extends Component {
handleEnter(params,replace) {
console.log('position enter')
console.log(params)
replace('/mine') //路由守卫
}
handleLeave(){
console.log('position leave')
}
render() {
return(
<Router history = { hashHistory }>
<Route path="/" component={Index}>
{/* <IndexRoute component={Position}></IndexRoute> */}
<IndexRedirect to="/position"></IndexRedirect>
<Route onEnter={ ({params},replace) => { this.handleEnter(params,replace) } } onLeave = { () => { this.handleLeave() } } path="position/:id" component={Position}>
{/* <Redirect from='/position/search' to="/search"></Redirect> */}
<Route path="/search" component={Search}/>
</Route>
<Route path="mine" component={Mine}/>
</Route>
<Route path="*" component={Page404}></Route>
</Router>
)
}
}
IndexRedirect 写到<Route/>里面
Redirect 写到外面
组件切换的时候生命周期钩子
路由守卫 onEnter onLeave 如上
unmount会被处触发 其他钩子正常