React路由器

开头

创新互联公司是专业的定边网站建设公司，定边接单;提供网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行定边网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

我今天又学习到新知识了，给大家分享一下吧，嘿嘿，我们共同去学习，进步。
今天学习的事关于React路由的知识，较浅的来说说吧。首先来了解下路由。

1.React路由的介绍

1.1具有单页面的特点
只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面
1.2优缺点
优点：加载速度快，用户体验比较好
缺点：

第一次加载比传统要慢一点

不利seo

页面相对复杂

返回键

2.路由的内置组件

路由的内置组件有：HashRouter、BrowserRouter、Route、Link、

HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；

Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component

Link表示一个路由的链接

BrowserRouter：h6路由（history API）

HashRouter和BrowserRouter的区别；

BrowserRouter和HashRouter都可以实现前端路由的功能，区别是前者基于url的pathname段，后者基于hash段。

前者：http://127.0.0.1:3000/article/num1

后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）

刷新页面，BrowserRouter会将当前路由发送到服务器（因为是pathname），而HashRouter不会（因为是hash段）。

3.实现路由的传值

1.首先安装react-router-dom；
在根目录安装即可
执行命令为：

cnpm install react-router-dom -S

也可以写为：

cnpm i react-router-dom -S

创建一个新的路由文件夹，存放路由（在生成的src中创建component文件夹）

在创建一个Apple.js,在里面引入这三个路由
代码如下

import React from "react";

import Home from "./component/Home";

import New from "./component/New";

import About from "./component/About";//引入路由文件

import { BrowserRouter, HashRouter, Route, Link} from "react-router-dom";

class App extends React.Component {

render() {

return (

//根容器 HashRouter写在根容器中，只写一次就ok

<div>

<h2>这是根目录</h2>

<hr />

<Link to="/home">邓紫棋偶像</Link>

<Link to="/new">熊梓淇男神</Link>

<Link to="/about">袁姗姗女神</Link>//在Link内置组件中，配置to属性，进行跳转：

</div>

//引入路由文件进行跳转

<Route path="/home" component={Home}></Route>//在Route内置组件中，配置path规则：

<hr />

<hr />

</HashRouter>

);

}

export default Apple;//向外暴露

路由一组件代码：Home.js

import React from "react";

class Home extends React.Component{

render(){

return(

<div>邓紫棋.G.E.M是我偶像，很棒很棒，实力强，唱歌好听</div>

)

}

export default Home;

路由二组件代码： New.js

import React from "react";

class New extends React.Component {

render() {

return <div>

熊梓淇是我的男神，无人可比，啦啦啦

</div>;

}

export default New;

路由三组件代码：About.js

import React from "react";

class About extends React.Component{

function(){ //XM代理申请 http://www.kaifx.cn/broker/xm.html

render(){

return(

<div>袁姗姗是个励志女神，马甲线好厉害</div>

)

}

export default About;

工程中生成的index.js代码：

import React from 'react';

import ReactDOM from 'react-dom';

import Apple from './Apple';

ReactDOM.render(<Apple /> , document.getElementById('root'));

最后执行命令：npm start

分享标题：React路由器
文章地址：https://www.cdcxhl.com/article42/jcpghc.html

成都网站建设公司_创新互联，为您提供响应式网站、动态网站、Google、网站策划、网站设计、商城网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容