react学习系列2,v4注意事项

作者:计算机知识

遇上的主题素材

类别中央调节制路由跳转使用的是BrowserRouter,代码如下:

ReactDOM.render((
    <BrowserRouter>
        <div className="container">
            <Route path={routePaths.INDEX} exact component={Index} />
            <Route path={routePaths.CARD} component={Card} />
            <Route path={routePaths.BASEINFO} component={BaseInfo} />
            <Route path={routePaths.EDUINFO} component={EduInfo} />
            <Route path={routePaths.FAMILYINFO} component={FamilyInfo} />
            <Route path={routePaths.OTHERINFO} component={OtherInfo} />
            <Route path={routePaths.DETAIL} component={Detail}/>
        </div>
    </BrowserRouter>
    ),
    document.getElementById('app')
);

在支付进程中动用是一向不难题的,可是将页面上传至服务器之后,难题就来了:用户访问的能源不设有,页面是一穷二白的。 经过排查疑心是路线的题目,将BrowserRouter 改为 HashRouter之后,难点消除了~

ReactRouter(github地址)是由 Ryan 弗罗伦丝 开荒的, 它是2个针对 React 而规划的路由化解方案、能够和煦的帮您化解 React components 到 U途乐L 之间的同台映射关系。

至于react-router的多数资料能够从官方文档中猎取

https://reacttraining.cn/web/guides/quick-start
此处写几点本人从v三 晋级到v4时候出现的标题

  1. 问:react-router,react-router-native和react-router-dom的区别
    答:react-router是基本。react-router-native和react-router-dom是在react-router的根基上针对不相同运营境况做为额外补充。对于web情况使用react-router-dom。对于开采react-native,使用react-router-native就可以。

  2. 法定的例子及代码
    web
    native

  3. 事例:手动跳转

题目浅析

react学习系列2,v4注意事项。首先分析下冒出此难点的来头: 在React项目中大家平常供给使用React-Router来配置大家的页面路由,React-Router 是成立在 history 之上的,常见的history路由方案有二种样式,分别是:

  • hashHistory
  • browserHistory
  • createMemoryHistory

hashHistory 使用 URL 中的 hash(#)部分去创制路由,举个例子来佛讲,用户访问

<HashRouter>
        <div className="container">
            <Route path='/repos' component={Repos} />
            <Route path='/about' component={About} />
        </div>
    </HashRouter>

上边代码中,用户访问/repos(例如

browserHistory 是行使 React-Router 的行使推荐的 history方案。它使用浏览器中的 History API 用于拍卖 U奥迪Q5L,创造一个像example.com/list/1二三如此实在的 U中华VL 。

在browserHistory 格局下,UKugaL 是指向真正 UXC60L 的财富路径,当通过实际 U昂CoraL 访问网址的时候,由于路径是指向服务器的安分守己路线,但该路径下并不曾相关财富,所以用户访问的财富不设有。

Memory history 不会在地点栏被操作或读取。那就表达了小编们是什么兑现服务器渲染的。同时它也非常适合测试和别的的渲染遇到(像 React Native )。和其它二种history的一点不等是你必须创设它,这种格局方便测试。

const history = createMemoryHistory(location)

率先个栗子

2个页面中有导航栏,导航栏里有「小说」、「关于」七个菜单。
点击「小说」呈现文章列表,链接产生 /posts;点击 「关于」展现关于板块,链接形成/about

首先我们引进供给的零件:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';

接下来我们申明一个零部件 App, Posts, About
零件App,也是体系的入口。能够清楚为是大家整整项指标layout,导航栏就在那边渲染

var App = React.createClass({
  render: function () {
    return (
      <div>
        <header>
          <ul>
            <li><Link to="/posts" activeClassName="active" activeStyle={{color: '#c00'}}>Posts</Link></li>
            <li><Link to="/about" activeClassName="active" activeStyle={{color: '#c00'}}>About</Link></li>
          </ul>
        </header>
        {this.props.children}
      </div>
    );
  }
});

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="posts" component={Posts}/>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('content'));

Link为ReactRouter 的组件之1,替代 a标签。它的prop有:

  1. to为链接的称谓
  2. activeClassName 为链接被激活的类名
  3. activeStyle 链接被激活时的体裁
  4. ..

Router 是react router 最基本的零部件,让您的路由和分界面保持同步,它的prop 有:childrenrouteshistory 等等。其中routes也被喻为children,也正是接下去讲的。

{this.props.children} ,这里的childrenRouter的prop, 指八个或三个Routes。当history退换的时候,Router将会协作三个Routes的一个分支, 并且渲染它们配置的零件。子路由组件将嵌套在母路由组件里。

Route被用来为应用程序的机件档案的次序结构证明路由的特别。path 即路由名称,component即贰个路由组件,当链接相配到该路由时,该器件就能被渲染在父路由组件的this.props.children

Posts 组件和About 组件:

var Posts = React.createClass({
  render: function () {
    return (
      <div>
        <ul>
          <li>haha</li>
          <li>haha2</li>
          <li>haha3</li>
        </ul>
      </div>
    );
  }
});

var About = React.createClass({
  render: function () {
    return (
      <div>
        <p>about page</p>
      </div>
    );
  }
});

运维效果如下:

当链接为 posts 时:

图片 1

posts

当链接为 about 时:

图片 2

about

一.代码拆分:

法定上给的例证是协调完结二个bundle类,使用
bundle-loader?lazy!./Something 和webpack达成代码拆分,这种方式在写的时候略有麻烦,能够友善退换bundle类完毕更简约的。这里提供二个主意:
使用import LazyRoute from 'lazy-route'

  path: '/customer/detail/',
  breadcrumbName: '客户管理/详情',
  exact: true,
  render: (props) => <LazyRoute {...props} component={import('./containers/customer/Detail')}/>

诸如此类二个布置,就足以直达代码拆分的效用且写起来相比美丽

路由文件

化解办法

  • 使用hashHistory

本土开拓时,使用browserHistory是从没有过难点的,那是因为webpack.config.js中央银行使 webpack-dev-server 已经做了配备。

 webpackConfig.devServer = {
        contentBase: path.resolve(__dirname, 'build'),
        compress: true, //gzip压缩
        historyApiFallback: true,
    };
  • 即使要选拔browserHistory的话,服务器须求张开连锁路由陈设,方法见 这里;

仿照效法资料:

其次个栗子

Route 配置升级。对于学习过angular的同学,那壹局地很好明白。
在「小说页」中,点击每一篇小说,展现每篇小说的实际情况。

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="posts" component={Posts}>
        <Route path=":id" component={Post}/>
      </Route>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('content'));

二.权限检查评定:

权力检查实验方今在品种中尚无找到二个好的主意去落到实处异步检查实验,如今是将权力获取到本地开始展览协同检查评定,在v四卯月v3的章程完全不相同。v叁中路由有钩,而在v4中收回了该格局,总体我们可以和煦封装router类来促成:

const PrivateRoute = ({component: Component, ...rest}) => (
  <Route {...rest} render={props => {
    return (
      api.isLogin() ?
        auth(props.match.path) ? (
          <Component {...props}/>
        ) : (
          <Redirect to={{
            pathname: '/permission-403',
            state: {from: props.location}
          }}/>
        ) : (
        <Redirect to={{
          pathname: '/login',
          state: {from: props.location}
        }}/>
      )
    )
  }}/>
);

export default PrivateRoute;
import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import Home from '../Pages/Home/'
import List from '../Pages/List/'
import Detail from '../Pages/Detail/'
import NoMatch from './404'

//  下面几行是老式写法,可以忽略
// import createBrowserHistory from 'history/createBrowserHistory';
// 是个用于浏览器导航#的历史对象
// const history = createBrowserHistory()
// <BrowserRouter /> 其实就是<Router history={history} />

export class RouterMap extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/list">List</Link></li>
          </ul>
          <hr/>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/list" component={List} />
            <Route path="/detail/:id" component={Detail} />
            <Route component={NoMatch}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

本文由bwin必赢发布,转载请注明来源

关键词: 日记本 亚洲必赢 笔戈 Web ... react