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;
————————————————
版权声明：本文为CSDN博主「山鬼谣弋痕夕」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_30363263/article/details/80992288
下载地址:
React学习（五）——向服务器请求数据并显示
React从零开始——一个详细的范例 |
