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-dom

2.引入这个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.测试