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.测试

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-01-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券