react学习总结3--React-Router

react 学习总结–React-Router

说明

react-route 版本 ： “^3.0.0”

react-router-redux 版本 ； “^4.0.7”

升级到 react-router 4 看这里
react16 + react-router4 + webpack开发环境搭建

简介

react 本身没有路由功能，必须借助第三方的库，React-Router 是官方推荐的路由库，通过URL的管理，实现组件的切换和状态的变化，可以用来开发SPA(单页应用)

react-router 以 react component 的组件方式提供 API，主要API如下

• Router //容器
• Route //路由
• IndexRoute //指定默认情况下的子组件
• Link //链接
• IndexLink //链接到跟路由
• Redirect //重定向
• IndexRedirect //跟路由的重定向

1.Router

Router 组件本身只是一个容器，真正的路由要有Route组件定义
<Router history={browhistory} routes={routes} />

Router组件有一个参数history表示切换路由的方法，常用的history有一下三种

• browserHistory
• hashHistory
• createMemoryHistory

browserHistory

browserhistory 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL ，路有效果：/home/ceshi/fir

注意：使用 browserHistory ,需要服务器进行配置

hashHistory

hashHistory 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。

hashHistory 不需要服务器任何配置就可以运行

2.Route

Route组件定义了URL路径与组件的对应关系，可以同时使用多个Route
， Route组件还可以嵌套父路由写this.props.children 加入子路由
，子路由也可以不写在Router中，而是通过传入routes属性

let routes = <Route path="/" component={App}></Route>
<Router routes={routes} history={browserHistory} />

path 属性

Route组件的path属性，指定路由的匹配规则，可以省略，这样不管路径是否匹配，总是会加载指定组件

path属性可以使用相对路径（不以/开头,相对于父组件的路径）或者绝对路径（/）,
path 路径可以传递参数（path=”/about/:id”）可以通过this.props.location.query来查询

路径语法

• <Route path="/hello/:name"> 表示匹配hello下任意部分
• <Route path="/hello(/:name)">()表示可选部分
• *表示 匹配任意字符
• **表示 匹配多个文件夹

3.IndexRoute

指定默认情况下加载的子组件

    <Route path="/" component={App}>
        <IndexRoute component={Test}/>
        <Route path="home" component={Home}/>
        <Route path="detail" component={Dates}/>
        <Route path="test/**" component={Test}>
            <IndexRoute component={Child} />
            <Route path="child" component={Child}/>
        </Route>
    </Route>

4.Link

Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。
Link 可以设置属性

• className ： 设置静态显示类
• style : 设置静态显示样式
• activeClassName ： 添加访问后类
• activeStyle ： 设置访问后样式

5.IndexLink

如果想要链接到根路由，不要使用Link 要使用 IndexLink

<IndexLink to="/">Home</IndexLink>

6.Redirect

用于路由跳转，即为访问一个路由会跳转到另外一个路由经，可以在外边定义路由组件，在想要访问的位置设定子组件跳转

    <Route path="test" component={Test}>
      {/* 从 /test/a 跳转到 /a */}
      ＜Redirect from="a" to="/a" />
    </Route>

7.IndexRedirect

IndexRedirect 组件用于访问根路由的时候，将用户重定向到某个子组件

    <Route path="/" component={App}>
        <IndexRedirect to="/test"/>
        <Route path="test" component={Test} />
    </Router>

8.常用方法

获取URL信息

路由系统中直接连接的组件都会有location属性，通过this.props.location可以获取URL信息

通过引入 browserHistory 也可以访问当前location ,即使不是与路由系统直接连接的组件也可以访问，并且还可以实现路由跳转

    import {browserHistory} from 'react-router';
    console.log(browserHistory.getCurrentLocation());//获取当前URL信息
    browserHistory.goBack(); //调到上一个页面
    let path = `/home`;
    browserHistory.push(path); //跳转到path页面

如果使用了react-router-redux 插件，还可以进一步提升可操作性

    import {syncHistoryWithStore} from 'react-router-redux';
    // 利用react-router-redux提供的syncHistoryWithStore我们可以结合redux 的 store同步导航事件
    const browhistory = syncHistoryWithStore(browserHistory, store);
    <Router history={browhistory} routes={routes} />

    //在 reducer 配置中引入 routing
    import {routerReducer} from 'react-router-redux';
    const reducer = combineReducers({ routing: routerReducer});

    //使用时，获取 store 的 state.routing.locationBeforeTransitions
    //即为 组件更新前获取的下一个路由改变

使用context,实现路由跳转

    class Child extends Component{
      constructor(props,context){
        super(props,context);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(){
        console.log(this.context.router);
      }
      render() {
        return (
          <button onClick={this.handleClick}>点击</button>
        );
      }
    }
    Child.contextTypes = {
      router : React.PropTypes.object
    }

详细说明请看React Router context.router 未定义错误

下一篇–Redux传送门

• Redux API
• React-Redux API