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

2023-08-21 03:30| 来源: 网络整理| 查看: 265

这里强化一下编程养成统一的规范，具体可见的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( ) } } export default App;

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

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

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

import React from 'react'; class Home extends React.Component{ render(){ return( This is Home! ); } } export default Home;

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

import React from 'react'; class Page3 extends React.Component{ render(){ return( This is Page3! ); } } export default Page3;

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

{ width:'200px', height:'80px', backgroundColor:'pink', fontSize:'24px', textAlign:'center' }} >This is Page1! ); } } export default Page1;

这样，可以看到：

如果想要加入超链接：

import React from 'react'; import { Link } from 'react-router-dom'; class Home extends React.Component{ render(){ return( This is Home! {color:'black'}}> 点击跳转到Page2

【本文地址】

公司简介

联系我们