React路由器

開頭

創(chuàng)新互聯(lián)公司是專業(yè)的定邊網(wǎng)站建設(shè)公司，定邊接單;提供網(wǎng)站設(shè)計、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行定邊網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

我今天又學習到新知識了，給大家分享一下吧，嘿嘿，我們共同去學習，進步。
今天學習的事關(guān)于React路由的知識，較淺的來說說吧。首先來了解下路由。

1.React路由的介紹

1.1具有單頁面的特點
只需要加載一次主頁面，通過局部刷新，就可以實現(xiàn)跳轉(zhuǎn)或者切換頁面
1.2優(yōu)缺點
優(yōu)點：加載速度快，用戶體驗比較好
缺點：

第一次加載比傳統(tǒng)要慢一點

不利seo

頁面相對復雜

返回鍵

2.路由的內(nèi)置組件

路由的內(nèi)置組件有：HashRouter、BrowserRouter、Route、Link、

?

HashRouter表示一個路由的根容器，將來所有的路由相關(guān)的東西，都要包裹在HashRouter里面，而且一個網(wǎng)站中，只需要使用一次HashRouter就好了；

Route表示一個路由規(guī)則，在Route上，有兩個比較重要的屬性，path，component

Link表示一個路由的鏈接

BrowserRouter：h6路由（history API）

HashRouter和BrowserRouter的區(qū)別；

?

BrowserRouter和HashRouter都可以實現(xiàn)前端路由的功能，區(qū)別是前者基于url的pathname段，后者基于hash段。

?

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

?

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

刷新頁面，BrowserRouter會將當前路由發(fā)送到服務(wù)器（因為是pathname），而HashRouter不會（因為是hash段）。

3.實現(xiàn)路由的傳值

1.首先安裝react-router-dom；
在根目錄安裝即可
執(zhí)行命令為：

cnpm install react-router-dom -S

也可以寫為：

cnpm i react-router-dom -S ?

創(chuàng)建一個新的路由文件夾，存放路由（在生成的src中創(chuàng)建component文件夾）

在創(chuàng)建一個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

??????<HashRouter>

????????<div>

??????????<h2>這是根目錄</h2>

??????????<hr />

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

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

??????????<Link to="/about">袁姍姍女神</Link>//在Link內(nèi)置組件中，配置to屬性，進行跳轉(zhuǎn)：

????????</div>

????????//引入路由文件 進行跳轉(zhuǎn)

????????<Route path="/home" component={Home}></Route>//在Route內(nèi)置組件中，配置path規(guī)則：

????????<hr />

????????<Route path="/new" ?component={New}></Route>

????????<hr />

????????<Route path="/about" component={About}></Route>

??????</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'));

最后執(zhí)行命令 ：npm start

分享標題：React路由器
文章地址：http://muchs.cn/article42/jcpghc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、動態(tài)網(wǎng)站、Google、網(wǎng)站策劃、網(wǎng)站設(shè)計、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)