React第三方组件1(路由管理之Router的使用①简单使用)
React第三方组件1(路由管理之Router的使用①简单使用)
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22
2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23
3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24
4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25
5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
今天我们讲下react-router，首先放出它的官网地址：
https://reacttraining.com/react-router/web/guides/philosophy
我们废话不多，直接进入示列！
先来看下我们之前的文件
大家可能会奇怪为什么每个Index.jsx文件,都这么写，其实你可以不这么写，我只是为了预留给将来用react-router使用！
1.首先加入依赖
这里我们用到的是 react-router-dom
npm i -S react-router-dom2.引入这个react-router-dom
import {HashRouter, Route, NavLink} from 'react-router-dom'HashRouter, Route, NavLink 这些含义大家查官网，或者百度，网上有很多资料,我只讲怎么用!
3.设置路由，我们把shop、 demo1、demo2这三个页面引入
import Shop from '../shop/Index';
import demo1 from '../demo/demo1/Index';
import demo2 from '../demo/demo2/Index';4.具体义务代码
const Index = () =>
<HashRouter>
<div>
<div className="nav">
<NavLink to="/" activeClassName="selected" exact>首页</NavLink>
<NavLink to="/Shop" activeClassName="selected" exact>商城</NavLink>
<NavLink to="/demo1" activeClassName="selected" exact>demo1</NavLink>
<NavLink to="/demo2" activeClassName="selected" exact>demo2</NavLink>
</div>
<Route exact path="/" component={() => <Seconds title="首页"/>}/>
<Route path="/Shop" component={Shop}/>
<Route path="/demo1" component={demo1}/>
<Route path="/demo2" component={demo2}/>
</div>
</HashRouter>
;这里要简单讲下：
<NavLink to="/" activeClassName="selected" exact>首页</NavLink>NavLink：渲染后会被转化程a链接
to：就是跳转页面地址
activeClassName：就是链接和当前页面理由一致后会使用这个样式。
exact ：精确匹配
如果你的组件需要传值，就得返回这个组件：
<Route exact path="/" component={() => <Seconds title="首页"/>}/>不需要传值的就直接这样写：
<Route path="/Shop" component={Shop}/>5.添加样式
修改 index.pcss
.nav {
a{
margin-right: 10px;
color: blue;
&.selected{
color: #f00000;
}
}
}
6.测试
腾讯云开发者
