react学习日志2

react-router4.0

以下内容学习自http://blog.csdn.net/github_38095237/article/details/70157021?winzoom=1

http://blog.csdn.net/sinat_17775997/article/details/69218382

感谢上述大牛提供的学习资料

1.安装

安装crete-react-app后，安装react router

npm install react-routernpm install react-router-dom
 
 

2.demo1

使用BrowserRouter

import React, { Component } from 'react';
import './App.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'//导入的方式跟之前有点变化
const One = () => (
    <div>
        <h2>首页</h2>
    </div>
)
const Two = () => (
    <div>
        <h2>我是第二页</h2>
    </div>
)
const Lists = ({ match }) => (
    <div>
        <h3>{match.params.ListsId}</h3>
    </div>
)
const List = ({ match }) => (
    <div>
        <h2>我是一个列表</h2>
        <ul>
            <li>
                <Link to={`${match.url}/我是第一个哈哈`}>
                    列表下边的第一个
                </Link>
            </li>
            <li>
                <Link to={`${match.url}/我是第二个呵呵`}>
                    列表下边的第二个
                </Link>
            </li>
            <li>
                <Link to={`${match.url}/我是第三个嘿嘿`}>
                    列表下边的第三个
                </Link>
            </li>
        </ul>
        <Route path={`${match.url}/:ListsId`} component={Lists}/>
        <Route exact path={match.url} render={() => (
            <h3>点击上边的列表项此处显示与url地址一样的...</h3>
        )}/>
    </div>
);
const App = () => (
    <Router>
        <div>
            <Link to="/">首页</Link>
            <br/>
            <Link to="/two">第二页</Link>
            <br/>
            <Link to="/Lists">一个列表</Link>
            <br/>
            <Route exact path="/" component={One}/>
            <Route path="/two" component={Two}/>
            <Route path="/Lists" component={List}/>
        </div>
    </Router>
);

export default App;

<BrowserRouter>

一个使用了 HTML5 history API 的高阶路由组件，保证你的 UI 界面和 URL 保持同步。此组件拥有以下属性：

basename: string
作用：为所有位置添加一个基准URL
使用场景：假如你需要把页面部署到服务器的二级目录，你可以使用 basename 设置到此目录。

<BrowserRouter basename="/minooo" />
<Link to="/react" /> // 最终渲染为 <a href="/minooo/react">

getUserConfirmation: func
作用：导航到此页面前执行的函数，默认使用 window.confirm
使用场景：当需要用户进入页面前执行什么操作时可用，不过一般用到的不多。

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation('Are you sure?', yourCallBack)} />

forceRefresh: bool
作用：当浏览器不支持 HTML5 的 history API 时强制刷新页面。
使用场景：同上。

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory} />

keyLength: number
作用：设置它里面路由的 location.key 的长度。默认是6。（key的作用：点击同一个链接时，每次该路由下的 location.key都会改变，可以通过 key 的变化来刷新页面。）
使用场景：按需设置。

<BrowserRouter keyLength={12} />

Hash history 不支持 location.key 和 location.state。另外由于该技术只是用来支持旧版浏览器，因此更推荐大家使用 BrowserRouter，此API不再作多余介绍

<HashRouter>

Hash history 不支持 location.key 和 location.state。另外由于该技术只是用来支持旧版浏览器，因此更推荐大家使用 BrowserRouter，此API不再作多余介绍。

<Route>

<Route> 也许是 RR4 中最重要的组件了，重要到你必须理解它，学会它，用好它。它最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

<Route> 自带三个 render method 和三个 props 。

render methods 分别是：

• <Route component>
• <Route render>
• <Route children>
  每种 render method 都有不同的应用场景，同一个<Route> 应该只使用一种 render method ，大部分情况下你将使用 component 。

props 分别是：

• match
• location
• history
  所有的 render method 无一例外都将被传入这些 props。

component
只有当访问地址和路由匹配时，一个 React component 才会被渲染，此时此组件接受 route props (match, location, history)。
当使用 component 时，router 将使用 React.createElement 根据给定的 component 创建一个新的 React 元素。这意味着如果你使用内联函数（inline function）传值给 component将会产生不必要的重复装载。对于内联渲染（inline rendering）, 建议使用 renderprop。

<Route path="/user/:username" component={User} />
const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

render: func
此方法适用于内联渲染，而且不会产生上文说的重复装载问题。

// 内联渲染
<Route path="/home" render={() => <h1>Home</h1} />

// 包装 组合
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props} />
    </FaseIn>
  )} />
)

<FadingRoute path="/cool" component={Something} />

children: func
有时候你可能只想知道访问地址是否被匹配，然后改变下别的东西，而不仅仅是对应的页面。

<ul>
  <ListItemLink to="/somewhere" />
  <ListItemLink to="/somewhere-ele" />
</ul>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest} />
    </li>
  )}
)

path: string
任何可以被 path-to-regexp解析的有效 URL 路径

<Route path="/users/:id" component={User} />

如果不给path，那么路由将总是匹配。

exact: bool
如果为 true，path 为 '/one' 的路由将不能匹配 '/one/two'，反之，亦然。

strict: bool
对路径末尾斜杠的匹配。如果为 true。path 为 '/one/' 将不能匹配 '/one' 但可以匹配 '/one/two'。

如果要确保路由没有末尾斜杠，那么 strict 和
exact 都必须同时为 true

常规页面选项框跳转为一下步骤

1.import相关manager组件

2.用<Router path='/地址栏' component=｛组件名｝>

3.<Link to='/地址栏'></Link>      该地址需要和Router  path一样

4.   <Link to={`${match.url}/我是第一个哈哈`}> 这句话将地址进行字符串拼接,`$｛｝

5.react-router 4.0 对于接受参数采用 { this.props.match.params.id }

如下例子：<Route path="list/:id"></Router> 
        <Link to="list/123456"></Link>

获取参数值的方式是：{ this.props.match.params.id }

6. exact 

exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。

exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。

如在exact为true时，’/link’与’/’是不匹配的，但是在false的情况下它们又是匹配的。

<Routepath='/'component={Home} />

<Routepath='/page'component={Page}>//这种情况下，如果匹配路由path='/page'，那么会把Home也会展示出来。