本文共 1821 字，大约阅读时间需要 6 分钟。

转载请注明出处：

本来想一下子把路由的接下来的内容都写完的，但是今天白天开了会，传了些代码打了个包，就被耽搁了 这一篇来讲一下 IndexLink和onlyActiveOnIndex的一些问题

老习惯先安利一下：

例子的源码都传了，源码地址：

知识来源：

前两天写了一些例子，包括普通跳转，嵌套，带参跳转等等，这一篇主要来实现一个常用功能 “回到首页“。

之前的例子里我们通过访问/来进入首页

    
 
  1 
  
 
  1

但是其实我们Main.js这个页面他没有页面内容，我们一开始就进入了First.js

那么如何让我们的Main.js有内容呢？

可以使用IndexRoute

先来新建一个模拟的页面

Six.js

import React from 'react';export default React.createClass({  render(){    return (      
   
        
    
this is Six
      
   
    )  }}) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12

也就是刷出一句话

要让Main.js能显示内容需要2步

1在 Main.js里加入以下内容

   
     
 
  1 
  
 
  1
   

实质上他让本来空空的根路径多了一个Six组件

     
    
    
 
  1 
  2 
  3 
  4 
  
 
  1 
  2 
  3 
  4

这还不够还需要在 First.js里做一些修改，如下

{this.props.children || 
   } 
 
  1 
  
 
  1

这使得<Six/>成为了根路由的子组件,它成为父节点的this.props.children

内容理解有差异或者错误大街可以给我提，原文地址：

接下来我们来提一下如何做一个返回页，最简单的方式是，写一个路由链过去，这很方便很简单，像这样

   
    To First
    
 
  1 
  
 
  1

官方不推荐我们这么干，因为跳转根路由会丢失一些内容，诸如activeClassName，activeStyle什么的。

官方推荐的是精确匹配方式 IndexLink

要是用还是要导包

import { IndexLink } from 'react-router' 
 
  1 
  
 
  1

然后使用

   
    To First
    
 
  1 
  
 
  1

就行了

你还记得我们自己封装的<NavLink/>组件吗？

它使用<Link/>实现的，那么就不能使用 IndexLink方式了吗？

答案是可以，加一个属性就行那就是 onlyActiveOnIndex

让我们在 Two.js这个页面加上返回按钮试试

import React from 'react';import styled from 'styled-components';import NavLink from './../component/nav/NavLink';const H3= styled.h3`  background-color: #a11`;export default React.createClass({  render(){    return (      
   
        
    
     To First
    
    
    
        
    
i am two h3
      
   
    );  }}) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18

单纯的加一个属性就好很简单，看看效果

进入首页 点击 Two 

到了第二页点返回键就可以回到第一页了 

效果很简单，但是整明白以后做类似功能就不会迷糊了，接下来还会继续写-Router相关内容吧，我本身不是做前端的，学习起来不是太快，各位观众老爷见谅哦！