React框架入门学习（三）使用router完成网页跳转

这里强化一下编程养成统一的规范，具体可见的JavaScript编程风格

补充：组件都以大写字母开头，文件以小写字母开头，命名方式均采用驼峰式。

接着（二）的新建的应用程序，对于index.js不用修改。我们首先完成路由选择，进行页面的跳转，传统的前端页面使用的链接方式进行跳转，而阵营使用的是路由器。

这里使用的路由器需要本地安装，使用命令：

npm install react-router

之后在app.js中引入反应路由器-DOM，导入编写的界面page1,2,3。

在组件的渲染函数的返回里面，我们可以看到一对<路由器>标签包含了四个<路线>标签，每个<路线>标签中都包含了路径属性和成分属性。

path 属性用于储存路径，就是网站主页路径后面的内容，假如网站地址是localhost：3000，那么，locahost：3000后面的字符串就是路径属性的内容。（注意，路由器只能有一个子组件，所以要把所有路由标签用一个DIV包裹起来）

部件  属性，其中储存了组件名称，当我们访问特定地址时就会渲染该组件，也可以称其为这一个路由的入口组件，可以由这个组件延伸开来搭建页面。

具体实现的代码如下：

import React from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import Home from './home';
import Page1 from './page1';
import Page2 from './page2';
import Page3 from './page3';

class App extends React.Component {
	render(){
		return(
		<Router >
		 <div>
			<Route path="/" component={Home} />
			<Route path="/Page1" component={Page1} />                                                                                                                                                                                                                                                                                   
			<Route path="/Page2" component={Page2} />  
			<Route path="/Page3" component={Page3} />                                                                                                                                                                                                                                                                                                                                                                                                                                          
		</div>
		</Router>
		)

		}
	}
export default App;

 

Home组件所在路由的路径为“/”，而“/ Page1”开头包含了“/”，React就会默认渲染Home组件。

如果想在访问其他地址时不显示首页组件，可以在首页组件所在路线标签中加入精确：

<Route exact path="/" component={Home} />

首页组件的内容如下（Home.js）：

import React from 'react';

class Home extends React.Component{
	render(){
		return(
			<div>
			<div>This is Home!</div>
			</div>
		);
	}
}

export default Home;

第1页，第3页组件类似，内容为：

import React from 'react';

class Page3 extends React.Component{
	render(){
		return(
			<div>
			<div>This is Page3!</div>
			</div>
		);
	}
}

export default Page3;

可以对页面增加CSS样式，举个例子：

<div  style={{ fontSize='16px' }}  >This is Page1!</div>

在HTML文件中使用CSS样式，CSS样式分为3种形式：

    1，内联式（行内样式）直接在标签内部声明样式

                <div style =“color：red; font-size：16px”>测试文字</ div>

    2，嵌入式（内部样式）通过标签名，类或id等方法与标签联系起来设置样式

                <style type =“text / css”> div {width：60px; } #mydiv {height：70px} </ style>

    3，外联式（外部样式）通过引入外部文件来设置样式

                <link rel =“stylesheet”type =“text / css”href =“mystyle.css”/>

在反应里，style =后面跟着的是两对大括号，与原本的style =“color：red; font-size：16px”不同。而且样式名称的命名方式也有所不同，由本来的font-size变成了fontSize，采用了单驼峰式的命名形式（前面单词小写，后面单词大写开头）其他的样式名称也用同样的方式来更改，比如用backgroundColor来替代background-color。然后把等号右边的16px加上了引号，作为一个字符串传入。不同样式字段之间用逗号隔开而不是分号。

代码如下：

import React from 'react';

class Page1 extends React.Component{
	render(){
		return(
			<div>
				<div
				style={{
				width:'200px',
				height:'80px',
				backgroundColor:'pink',
				fontSize:'24px',
				textAlign:'center'
				}}
				>This is Page1!</div>
			</div>
		);
	}
}

export default Page1;

这样，可以看到：

如果想要加入超链接：

import React from 'react';
import { Link } from 'react-router-dom';

class Home extends React.Component{

	render(){
		return(
			<div>
				<div>This is Home!</div>
				<div>
				<Link to="/Page1/" style={{color:'black'}}>
				<div>点击跳转到Page1</div>
				</Link>
				<Link to="/Page2/" style={{color:'black'}}>
				<div>点击跳转到Page2</div>
				</Link>
				<Link to="/Page3/" style={{color:'black'}}>
				<div>点击跳转到Page3</div>
				</Link>
				</div>
			</div>
		);
	}
}

export default Home;

这样可以实现页面的跳转，这里的跳转并没有访问新的HTML文件，而是由作出反应改变了原本的html页面中的内容。

 

附：

CSS样式作为一个对象来引入，该对象的属性就对应着CSS样式属性，创建一个名称为myStyle的的对象：

import React from 'react';

class Page1 extends React.Component{
    render(){
        let mystyle={
            width:'200px',
            height:'80px',
            backgroundColor:'pink',
            fontSize:'24px',
            textAlign:'center'
        }
    return(
        <div>
            <div style={mystyle}>This is Page1!</div>
        </div>
        );
    }
}

export default Page1;

 

    上面代码中在组件的渲染函数里创建了一个myStyle的对象，属性为CSS样式的内容，在下方标签中的样式属性中引入myStyle的对象（注意，这里只有一层大括号），页面呈现的内容同样使用了CSS样式：

 

      外部导入CSS文件：在同级目录下创建一个mystyle.css文件，内容如下：

#mydiv{
width:200px;
height:80px;
background-color:yellow;
font-size:24px;
text-align:center
}

     去掉Page1组件中定义的样式，并给<div>标签添加id ='mydiv'：

import React from 'react';
require('./mystyle.css');

class Page1 extends React.Component{
    render(){
        return(
            <div>
                <div id='mydiv'>This is Page1!</div>
            </div>
        );
    }
}

export default Page1;