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

npmi -S react-router-dom

2.引入这个react-router-dom

import {HashRouter, Route, NavLink}from 'react-router-dom'

HashRouter, Route, NavLink 这些含义大家查官网，或者百度，网上有很多资料,我只讲怎么用!

3.设置路由，我们把shop、 demo1、demo2这三个页面引入

import Shopfrom '../shop/Index';

import demo1 from '../demo/demo1/Index';

import demo2 from '../demo/demo2/Index';

4.具体义务代码

const Index = () =>

           

               首页

               商城

               demo1

               demo2

           }/>

           

           

           

;

这里要简单讲下：

首页

NavLink：渲染后会被转化程a链接

to：就是跳转页面地址

activeClassName：就是链接和当前页面理由一致后会使用这个样式。

exact ：精确匹配

如果你的组件需要传值，就得返回这个组件：

}/>

不需要传值的就直接这样写：

5.添加样式

修改 index.pcss

.nav {

a{

margin-right:10px;

   color:blue;

   &.selected{

color:#f00000;

   }

}

}

6.测试

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!