2017.12.07 React路由到不同组件界面

前提:

引入的react-router组件必须是2.*.*的版本,不然其他版本不是这样的写法
 

1.index首页路由到不同组件界面:

import React,{Component} from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { Router,hashHistory,Route } from ‘react-router‘;
import Apply from ‘./apply‘;
import Examines from ‘./Examine‘;
export  class Routes extends Component{
    render(){
        console.log(‘Routes‘)
            return(
                <Router history={hashHistory}>
                    <Route path="/" component={Apply}/>
                    <Route path="/a" component={Examines}/>
                </Router>
            );
    }
}
ReactDOM.render(<Routes/>, document.getElementById(‘root‘));

实现的效果:

2.需要路由的组件怎么写?

(1)首先必须有:只有加了   default

export default class Apply extends Component{}

路由页面才能导入相应的组件:

(2)需要路由的组件不能再次注册:

				
时间: 2024-08-30 09:33:19

2017.12.07 React路由到不同组件界面的相关文章

2017.12.07 React组件嵌套以及for循环渲染子组件

1.嵌套组件之父组件的定义: export default class Examines extends Component{ componentWillMount() { console.log("aaaaaaaa"); var data2={ action:"queryTaskOfManager" }; Common.getData(JSON.stringify(data2),function (ret) { alert(ret); var data3={ na

2017.11.30 React基础语法之一组件

1.推荐一个React学习中文网站:http://www.css88.com/react/ 2.使用jsx来将代码封装成React组件,然后像插入普通 HTML 标签一样,在其他地方插入这个组件.使用React.createClass用于生成一个组件 var MyComponent=React.createClass({ render: function() { return <h1>Hello world!</h1>; } }); ReactDOM.render( <MyC

2017.12.07 Ajax获取服务器数据并发送到前端

1.前端:在React渲染页面之前就加载服务器数据: componentWillMount() { console.log("aaaaaaaa"); var data2={ action:"queryTaskOfManager" }; Common.getData(JSON.stringify(data2),function (ret) { alert(ret); }); } 2.前端调用这个React生命周期函数: 3.ajax文件封装成组件后,导出: 4.Aja

我的一个react路由之旅(步骤及详图)

今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的,原理性的东西,网上很多,我现在搬砖学习很开心,勿忘初心~ (1)首先,你确定你安装了react环境,这第一步难度系数1,菜鸟级别的不演示了 (2)接下来,你要是用react路由,需要安装路由插件 1 npm install react-router-dom --save-dev //这里可以使用c

我的一个React路由嵌套(多级路由),路由传参之旅

在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的react已经配置了redux(见我的redux之旅),所以这是在引入的插件里做的演示. 从App组件跳转到NewRoute组件(需要简单的路由跳转,点击自己预习) (1)新建一个demo: 这里使用了render方式在一个文件中模拟了多个组件的效果 代码只为讲解使用在真实开发中尽量不要这样写代码的. 这

简单的说一下react路由(逆战班)

现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前端 路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)前端路由是一套映射规则,在React中,是URL路径与组件的对应关系使用React路由简单来说,就是配置路径和组件路由的基本使用步骤: 1 import React from 'react'; 2 import ReactDOM fro

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

2017年07月05号课堂笔记

2017年07月05号 星期三 多云 空气质量:中度污染 内容:mysql第五节课+MySQL自测考试 表连接查询:内连接,左右外连接,自连接 事务:事务的特性 ACID,demo(模拟 银行转账)开启,回滚,提交,关闭/开启事务自动提交 一.表连接查询 1.概念: 1)内连接 : 通过匹配两个表中公共列,找到 公共的行! 2)左外连接: 以左表为准,右表中没有数据返回null 3)右外连接: 以右表为准,左表中没有数据返回null 4)自连接:  把一个表当成多个表来使用 关键是 使用别名 2

react路由配置(未完)

React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-router-dom 1.引入 上边两种方法都行,需要注意的是第二种,下边的便签的写成<HashRouter></HashRouter> 2.如何使用 3.路由传参 原文地址:https://www.cnblogs.com/5b4cn/p/9393527.html