React-router
官方文档:https://react-guide.github.io/react-router-cn/docs/guides/advanced/NavigatingOutsideOfComponents.html (强烈推荐)
react-router入门可以看阮一峰老师的文章: http://www.ruanyifeng.com/blog/2016/05/react_router.html
前言
react-router现在是4.x版本,但是3.x版本的react-router用的比较多一些,阮一峰老师所讲解的也是3.x版本,通过npm安装需要制定版本号,如 npm install react-router@3.0.1 --save 。
和vue-router非常类似, react-router实现单页面应用的方式也是用 hash 的变化来切换页面。同样地,react-router也是使用Router和Router来管理路由。同时分配了Link来点击路由,实际上就是一个a标签。
基本使用方法
基本使用方式如下:
import { Router, Route, hashHistory } from 'react-router'; render(( <Router history={hashHistory}> <Route path="/" component={App}/> </Router> ), document.getElementById('app'));
其中,我们可以引入Router,作为一个容器,管理所有的路由,接着引入Route, 用来真正地定义路由,最后使用hashHistory是说通过路由的切换由URL的hash变化决定,即URL的#
部分发生变化。举例来说,用户访问http://www.example.com/
,实际会看到的是http://www.example.com/#/
。 一般在vue中也是使用这种方式的,当然,在vue中我们也可以不用#来切换,但是这需要后端的配合。
对于比较简单的React路由,通过下面这种方法就足够了:
<Router history={hashHistory}> <Route path="/" component={App}/> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Router>
但是对于复杂的路由,通常会用到嵌套路由:
<Router history={hashHistory}> <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>
但是这是App的写法就发生了变化,需要我们写为下面的形式:
<App> <Repos/> </App>
App 组件的写法如下:
export default React.createClass({ render() { return <div> {this.props.children} </div> } })
而其中的path属性就是制定具体的url。 而后的component制定在当前的path下使用的组件。
history相关
react-router是建立在 history 之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location
对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。
常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。
browserHistory
hashHistory
createMemoryHistory
// JavaScript 模块导入(译者注:ES6 形式) import { browserHistory } from 'react-router'
render( <Router history={browserHistory} routes={routes} />, document.getElementById('app') )
一般我们推荐的是browserHistory,即和hashHistory不同,他不会出现 # 的情况,看上去更加美观一些。
但是使用这种方法,需要后端进行配合,如node端使用下面的方法,否则在刷新的时候会出现问题:
app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, '../www/index.html')) })
跳转前确认
React Router 提供一个 routerWillLeave
生命周期钩子,这使得 React 组件可以拦截正在发生的跳转,或在离开 route 前提示用户。routerWillLeave
返回值有以下两种:
return false
取消此次跳转return
返回提示信息,在离开 route 前提示用户进行确认。
你可以在 route 组件 中引入 Lifecycle
mixin 来安装这个钩子。
import { Lifecycle } from 'react-router' const Home = React.createClass({ // 假设 Home 是一个 route 组件,它可能会使用 // Lifecycle mixin 去获得一个 routerWillLeave 方法。 mixins: [ Lifecycle ], routerWillLeave(nextLocation) { if (!this.state.isSaved) return 'Your work is not saved! Are you sure you want to leave?' }, // ... })
使用这种方式可以使用钩子函数,那么使用 React.Component的方式应该也是可以的。
但是在实际使用过程中还是遇到了问题,没有成功。 可以取代他的方法是使用 e.preventDefault() 来阻止默认。
组件外部跳转
如下所示:
// your main file that renders a Router import { Router, browserHistory } from 'react-router' import routes from './app/routes' render(<Router history={browserHistory} routes={routes}/>, el)
// somewhere like a redux/flux action file: import { browserHistory } from 'react-router' browserHistory.push('/some/path')
传递参数
传递:
获取: