一.路由的作用
搭建單頁面應(yīng)用
注意：如果使用了React或者Vue想處理SEO問題包帚，將會變得麻煩一些纤虽。
SEO：百度搜索引擎優(yōu)化
二.react項目中安裝路由react-router
安裝：npm install --save react-router@3.x??
這里安裝的是3.x版本
三.react-router所包含哪些常用對象
Router：包裹路由的父容器
Route：子組件加載的容器
hashHistory：處理路由跳轉(zhuǎn)歷史
IndexRoute：路由默認加載的選項（路由嵌套中）
Link：路由跳轉(zhuǎn)
四.如何在一個react項目中使用react-router
第一步：
安裝：npm install --save react-router@3.x??
第二步：
1.在app.js(即：你的主入口文件)通過import引入 代碼為：
import { Router,Route,hashHistory,IndexRoute } from "react-router"
2.引入之后通過路由對象開始編碼艘包，此步驟一般在你引入react-router那個文件下操作（app.js）
? ? 然后在引入導(dǎo)航導(dǎo)過去的每個頁面組件 也是用import引入
? ? 如引入index首頁 即： import Index from "./pages/index"? //引號里是該組件的路徑
以導(dǎo)航欄為例：PCIndex表示已經(jīng)寫好的導(dǎo)航樣式組件
? ? ? ? ? ? ? ? ? ? ? ?<Router? history={hashHistory}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route path="/" component={PCIndex}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<IndexRoute component={Index}><IndexRoute> //表示默認加載index頁面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route path="/guoji" component={Guoji}></Route>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route path="/guonei" component={Guonei}></Route>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Route>
? ? ? ? ? ? ? ? ? ? ? ? ?<Router>
第三步：
路由寫好后去nav.js中添加Link就可以實現(xiàn)跳轉(zhuǎn) 如下代碼：
首先：引入Link? 代碼為??import {Link} from "react-router"
<ul>
? ? ? <li><Link to={"/"} >首頁<Link></li>
? ? ? <li><Link to={"/guoji"}>國際<Link></li>
? ? ? <li><Link to={"/guonei"}>國內(nèi)<Link></li>
</ul>
第四步：
在要把顯示這幾個頁面的地方添加 {this.props.children}即可
五.路由的參數(shù)傳遞
即在所添加的路由路徑后面加/：參數(shù)名
實例：
第一步：加一個類型和數(shù)量? <Route path="/guoji/:type/:count" component={Guoji}></Route>
第二步：去nav,js中傳遞數(shù)據(jù)? <Link to={"/guonei/${'guoji'}/${'20'}"}><Link>
以上即把參數(shù)傳遞給了國際這個組件頁面
六.通過網(wǎng)絡(luò)請求展示數(shù)據(jù)
第一步：可以先封裝好一個htttp請求
//封裝get請求如下
export function httpGet(url){
? ? ?var result = fetch(url,{
? ? ? ? ? ?method:"GET"
? ? ? })
? ? ? return result;
}
//post請求如下
export function httpPost(url,params){
? var result = fetch(url,{
? ? method:"POST",
? ? headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/x-www-form-urlencoded'
},
? ? // 此方式接受的參數(shù)類型
? ? // 需求數(shù)據(jù)：name=iwen&age=20
? ? // 我們希望的是{ name:iwen,age:20 }
? ? body:parseParams(params)
? })
? return result;
}
function parseParams(obj){
? var result = '';
var item;
for (item in obj) {
? ? // { name:iwen,age:20 }
? ? // &name=iwen&age=20
result += '&' + item + '=' + encodeURIComponent(obj[item]);
}
if (result) {
result = result.slice(1);
}
? return result;
}
可以把上述所有代碼保存到一個http.js中以后再使用網(wǎng)絡(luò)請求時直接調(diào)用即可
第二步：在guoji組件中引入http請求（以get為例）
1.? import { httpGet } from "../../http/http"
2.先初始化這個state數(shù)據(jù) 如下：
constructor(){
? ? super();
? ? this.state = {
? ? ? news:{
? ? ? ? result:{
? ? ? ? ? data:[]
? ? ? ? }
? ? ? }
? ? }
? }
2.? 然后在componentDidMount里進行網(wǎng)絡(luò)請求 如下代碼：
componentDidMount(){
? ? httpGet("http://www.wwtliu.com/sxtstu/news/juhenews.php?type=top&count=30")
? ? .then(res => {
? ? ? return res.json()
? ? })
? ? .then(data => {
? ? ? this.setState({
? ? ? ? news:data
? ? ? })
? ? })
? }
3. 使用map遍歷這個數(shù)據(jù)對象
{?
? ? ?news.result.data.map((ele,index) =>{
? ? ? ? ? ?return <li> {ele.title} </li>
? ? ?})
}
