react-router使用教程

tommego 发布于2019-08-20 18:22 / 3345人阅读

react-router使用教程

关于url中#的作用:

学习: http://www.ruanyifeng.com/blo...

"#"代表网页中的一个位置。其右面的字符，就是该位置的标识符

改变#不触发网页重载

改变#会改变浏览器的访问历史

window.location.hash读取#值

window.onhashchange = func 监听hash改变

reat-router

github主页: https://github.com/ReactTrain...

官网教程: https://github.com/reactjs/re...官方教程)

一峰教程: http://www.ruanyifeng.com/blo...

react-router库中的相关组件

包含的相关组件:

Router: 路由器组件, 用来包含各个路由组件,用来管理路由

Route: 路由组件, 注册路由

IndexRoute: 默认路由组件

hashHistory: 路由的切换由URL的hash变化决定，即URL的#部分发生变化

Link: 路由链接组件，生成a标签的

Router: 路由器组件

属性: history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配

子组件: Route

Route: 路由组件

属性1: path="/xxx"

属性2: component={Xxx}

根路由组件: path="/"的组件, 一般为App

子路由组件: 子配置的组件

IndexRoute: 默认路由

当父路由被请求时, 默认就会请求此路由组件

hashHistory

用于Router组件的history属性

作用: 为地址url生成?_k=hash, 用于内部保存对应的state

Link: 路由链接

属性1: to="/xxx"

属性2: activeClassName="active"

下载相关插件：

npm install react-router@3 --save

编码

定义各个路由组件

About.js

</>复制代码 
import React from "react"
function About() {
  return About组件内容
}
export default About

Home.js

</>复制代码 
import React from "react"
function Home() {
  return Home组件内容2
}
export default Home

Repos.js

</>复制代码 
import React, {Component} from "react"
import {Link} from "react-router";
export default class Repos extends Component {
    constructor(props){
        super(props);
        this.state = {
            repos : []
        }
    }
    componentDidMount(){
        let repos = [
            {name : "facebook", repo : "yarn"},
            {name : "facebook", repo : "react"},
            {name : "google", repo : "angular"},
            {name : "antd", repo : "antd"},
        ];
        this.setState({repos});
    }
    render() {
        return (
            
                Repos 组件
                                    {
                        this.state.repos.map((item, index) => {
                            return 
{item.repo}
                        })
                    }
                
                {this.props.children}
            
        )
    }
}

定义应用组件: App.js

</>复制代码 
import React from "react";
import {Link} from "react-router"
class App extends React.Component{
    render(){
        return (
            
                Hello, React Router!
                                    
about
                    
repos
                
                {this.props.children}
            
        )
    }
}
export default App;

定义入口JS: index.js-->渲染组件

</>复制代码 
import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute} from "react-router";
import App from "./components/App/App";
import About from "./components/About/About";
import Repos from "./components/Repos/Repos";
import Home from "./components/Home/Home";
import Repo from "./components/Repo/Repo";
ReactDOM.render(
    (
        
            
                
                
                
                    
                
            
        
    ),
    document.getElementById("root")
);

主页面: index.html

</>复制代码

传递请求参数

repo.js: repos组件下的分路由组件

</>复制代码 
import React from "react";
 
 function Repo({params}) {
     return 用户名:{params.name}, 仓库名:{params.repo}
 }
 
 export default Repo;

repos.js

</>复制代码 
import React, {Component} from "react"
import {Link} from "react-router";
export default class Repos extends Component {
    constructor(props){
        super(props);
        this.state = {
            repos : []
        }
    }
    componentDidMount(){
        let repos = [
            {name : "facebook", repo : "yarn"},
            {name : "facebook", repo : "react"},
            {name : "google", repo : "angular"},
            {name : "antd", repo : "antd"},
        ];
        this.setState({repos});
    }
    render() {
        return (
            
                Repos 组件
                                    {
                        this.state.repos.map((item, index) => {
                            return 
{item.repo}
                        })
                    }
                
                {this.props.children}
            
        )
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84422.html

React Router 使用教程(阮一峰)

摘要：它是官方维护的，事实上也是唯一可选的路由库。表示的这个部分是可选的。另一种做法是，使用指定当前路由的。而组件会使用路径的精确匹配。否则用户直接向服务器请求某个子路由，会显示网页找不到的错误。真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做...

Yang_River 2019-08-20 17:03 评论0 收藏0
React工程实践：基于React、Redux、React-Router的前端脚手架

摘要：项目地址基于和的前端脚手架。目录前言特性环境开始工程结构开发调试单元测试静态部署相关文档致谢前言如果你是一个初学者，这个项目可以是很好的教程。单元测试新增一个单元测试，你只需在中创建文件。在脚手架中用于扩展服务和代理。项目地址: https://github.com/YutHelloWo... 基于React、Redux、React-Router@3.x、webpack和reacts...

wangbjun 2019-08-20 18:27 评论0 收藏0
前端学习资源整理

稍微整理了一下自己平时看到的前端学习资源，分享给大家。 html MDN：Mozilla开发者网络 SEO：前端开发中的SEO css 张鑫旭：张鑫旭的博客 css精灵图：css精灵图实践栅格系统：详解CSS中的栅格系统媒体查询：css媒体查询用法 rem布局：手机端页面自适应布局移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局：手机淘宝移动端布局 fl...

siberiawolf 2019-08-21 11:27 评论0 收藏0
实例讲解react+react-router+redux

摘要：而函数式编程就不一样了，这是模仿我们人类的思维方式发明出来的。数据流在中，数据的流动是单向的，即从父节点传递到子节点。数据流严格的单向数据流是架构的设计核心。前言总括：本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。代码地址：Re...

RiverLi 2019-08-21 11:20 评论0 收藏0
React Router 学习手册(基础篇)

摘要：该手册是基于和使用教程学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文，为提供了一个完整的路由库，它允许你通过的变化来控制组件的切换与变化有关全家桶的其余相关文章，可以查看以下链接，会持续更新别眨眼看安装使用进行安装之后该手册是基于react-router 和 React Router 使用教程学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文， React ...

DobbyKim 2019-08-22 10:40 评论0 收藏0