React-router 小计

现在对于路由的历史配置基本都是用browserHistory,对于Route 在你进行Link组件切换(切换页面)是,浏览器的url会改变,但实际上没刷新,组件的切换全是route内部做好;

一般url改变后,你如果手动刷新页面,可能会出现找不到页面的情况,这样情况可能的服务器端进行重定位,但用户手动刷新时强制跳转到首页,即如下:的“/React_WeiXin/”

路由配置相关

路由官方文档做得确实不够,很多重要的细节都没说出来,还自己也是试了一整天

一般配置如下

  <Router history={browserHistory}>
    <Route path="/React_WeiXin/" component={Index}>  //如果配置了这个组件,这个则会一直显示在你的页面中,可做导航  
      <IndexRoute component={Welcome}/>  
      <Route path="/React_WeiXin/detail" component={Detail}/>
      <Route path="/React_WeiXin/test" component={SenconPage}/>
      <Route path="*" component={NotFound}/>   
    </Route>
  </Router>	


组件渲染如下

URL 组件
/React_WeiXin/ Index+Welcome
/React_WeiXin/detail Index+Detail
/React_WeiXin/test Index+SenconPage
没配置的 Index+NotFound

如果跟目录没设置,则不会显示Index组件

注意:对于Route path="/React_WeiXin/" component={Index} 中的component可不进行配置吗,如果配置了,则Index则必须包含{this.props.children},否则路由切换不起效

class Index extends React.Component{
	render(){
		return(
			<div>
				<p id ="lin_test">Hello world!This is Index</p>
				<Link to="/React_WeiXin/detail" className="weui_btn weui_btn_warn">Detail</Link>
				<Link to="/React_WeiXin/test" className="weui_btn weui_btn_warn">第二</Link>
				<Link to="/React_WeiXin/inbox">Inbox</Link>
				{this.props.children}
			</div>
		)
	}
}


 

猜你喜欢

转载自blog.csdn.net/Mr_linjw/article/details/51672490