一.路由的作用
搭建单页面应用
注意：如果使用了React或者Vue想处理SEO问题，将会变得麻烦一些。
SEO：百度搜索引擎优化
二.react项目中安装路由react-router
安装：npm install --save react-router@3.x
这里安装的是3.x版本
三.react-router所包含哪些常用对象
Router：包裹路由的父容器
Route：子组件加载的容器
hashHistory：处理路由跳转历史
IndexRoute：路由默认加载的选项（路由嵌套中）
Link：路由跳转
四.如何在一个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）
然后在引入导航导过去的每个页面组件 也是用import引入
如引入index首页 即： import Index from "./pages/index" //引号里是该组件的路径
以导航栏为例：PCIndex表示已经写好的导航样式组件
<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就可以实现跳转 如下代码：
首先：引入Link 代码为 import {Link} from "react-router"
<ul>
<li><Link to={"/"} >首页<Link></li>
<li><Link to={"/guoji"}>国际<Link></li>
<li><Link to={"/guonei"}>国内<Link></li>
</ul>
第四步：
在要把显示这几个页面的地方添加 {this.props.children}即可
五.路由的参数传递
即在所添加的路由路径后面加/：参数名
实例：
第一步：加一个类型和数量 <Route path="/guoji/:type/:count" component={Guoji}></Route>
第二步：去nav,js中传递数据 <Link to={"/guonei/${'guoji'}/${'20'}"}><Link>
以上即把参数传递给了国际这个组件页面
六.通过网络请求展示数据
第一步：可以先封装好一个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'
},
// 此方式接受的参数类型
// 需求数据：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中以后再使用网络请求时直接调用即可
第二步：在guoji组件中引入http请求（以get为例）
1. import { httpGet } from "../../http/http"
2.先初始化这个state数据 如下：
constructor(){
super();
this.state = {
news:{
result:{
data:[]
}
}
}
}
2. 然后在componentDidMount里进行网络请求 如下代码：
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遍历这个数据对象
{
news.result.data.map((ele,index) =>{
return <li> {ele.title} </li>
})
}
网友评论