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

这里强化一下编程养成统一的规范，具体可见的JavaScript编程风格
<https://blog.csdn.net/weixin_30363263/article/details/80986392>

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

接着（二）的新建的应用程序，对于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;

热门工具换一换