ReactRouter基本使用2

ReactRouter基本使用2

十、histroy 属性

​​Router​​​组件的​​history​​属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。

​​history​​属性，一共可以设置三种值。

browserHistoryhashHistorycreateMemoryHistory

如果设为​​hashHistory​​​，路由将通过URL的hash部分（​​#​​​）切换，URL的形式类似​​example.com/#/some/path​​。

import { hashHistory } from 'react-router'render( , document.getElementById('app'))

如果设为​​browserHistory​​​，浏览器的路由就不再通过​​Hash​​​完成了，而显示正常的路径​​example.com/some/path​​，背后调用的是浏览器的History API。

import { browserHistory } from 'react-router'render( , document.getElementById('app'))

但是，这种情况需要对​​服务器改造​​。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。

如果开发服务器使用的是​​webpack-dev-server​​​，加上​​--history-api-fallback​​参数就可以了。

-dev-server --inline --content-base . --history-api-fallback

​​createMemoryHistory​​​主要用于服务器渲染。它创建一个内存中的​​history​​对象，不与浏览器URL互动。

= createMemoryHistory(location)

十一、表单处理

下面是一个表单。

Go

第一种方法是使用​​browserHistory.push​​

import { browserHistory } from 'react-router'handleSubmit(event) { event.preventDefault() const userName = event.target.elements[0].value const repo = event.target.elements[1].value const path = `/repos/${userName}/${repo}` browserHistory.push(path) },

第二种方法是使用​​context​​对象。

.createClass({ : { router: React.PropTypes.object }, handleSubmit(event) { .context.router.push(path) }, })

十二、路由的钩子

每个路由都有​​Enter​​​和​​Leave​​钩子，用户进入或离开该路由时触发。

＜Route path="inbox" component={Inbox}> ＜Redirect from="messages/:id" to="/messages/:id" />

上面的代码中，如果用户离开​​/messages/:id​​​，进入​​/about​​时，会依次触发以下的钩子。

​​/messages/:id​​​的​​onLeave​​​​/inbox​​​的​​onLeave​​​​/about​​​的​​onEnter​​

面是一个例子，使用​​onEnter​​​钩子替代​​​​组件。

​​onEnter​​钩子还可以用来做认证。

const requireAuth = (nextState, replace) => { if (!auth.isAdmin()) { // Redirect to Home page if not an Admin replace({ pathname: '/' }) }}export const AdminRoutes = () => { return ( )}

下面是一个高级应用，当用户离开一个路径的时候，跳出一个提示框，要求用户确认是否离开。

const Home = withRouter( React.createClass({ componentDidMount() { this.props.router.setRouteLeaveHook( this.props.route, this.routerWillLeave ) }, routerWillLeave(nextLocation) { if (!this.state.isSaved) return '确认要离开？'; }, }))

上面代码中，​​setRouteLeaveHook​​​方法为​​Leave​​​钩子指定​​routerWillLeave​​​函数。该方法如果返回​​false​​，将阻止路由的切换，否则就返回一个字符串，提示用户决定是否要切换。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。