• React-Router入门


    之前自己有在用React来重构之前写过的自己工作室官网,其中有用到React中的核心思想:组件,props,state。还有用Rap的接口来实现前后端交互请求(就是请求团队成员的信息部分)。自己觉得还是实现起来比较简单。

    现在呢。学习React不仅要学习官网的一些知识,还要学习一些有关它的技术栈。
    今天自己搜索了阮一峰的有关React-Router的教程。自己跟着github上的14个小栗子进行了练习。

    下面总结一些。
    先粘贴一段代码:

    //route.js
    module.exports = (
        <Route path="/" component={App}>
            <Route path="/repos" component={Repos}>
                <Route path="/repos/:username/:repoName" component={Repo} />
            </Route>
            <Route path="/about" component={About} />
        </Route>
    );
    
    //index.js
    import React from 'react'
    import { render } from 'react-dom'
    import {Router,browserHistory} from 'react-router';
    import routes from './modules/routes';
    
    render(<Router history={browserHistory} routes={routes} />,document.getElementById('app'));
    
    

    相信浏览一遍上面的代码之后,就会发现主要有Router,Route这两个组件。Router组件本身只是一个容器,真正的路由要通过Route组件定义,Route组件定义了URL路径和组件之间的对应关系,你可以同时使用多个Route组件。
    举个简单的小栗子
    用户访问/repos(比如http://localhost:8080/#/repos)时,加载Repos组件;访问/about(http://localhost:8080/#/about)时,加载About组件。

  • 相关阅读:
    MFC中动态控件的创建与响应
    fseek函数
    fullPage.js插件用法(转发)
    二级联动
    ajax_异步交互-get/post方式
    02_数据类型转换-小结
    01_创建对象的三种方法
    分布式与集群
    FSM
    开发一个第三方库的一般性和团队特定规则
  • 原文地址:https://www.cnblogs.com/sminocence/p/8451252.html
Copyright © 2020-2023  润新知