React路由器

開頭

我今天又學習到新知識了，給大家分享一下吧，嘿嘿，我們共同去學習，進步。
今天學習的事關于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

??????<HashRouter>

????????<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 />

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

最后執行命令 ：npm start