React-router 小计

来源：互联网发布：kettle 大数据插件编辑：程序博客网时间：2024/06/16 00:19

现在对于路由的历史配置基本都是用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/detailIndex+Detail/React_WeiXin/testIndex+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>)}}

0 0