試着用React寫項目-利用react-router解決跳轉路由等問題（三）

原創

王亟亟

2020-02-20 13:11

轉載請註明出處：王亟亟的大牛之路

本來想一下子把路由的接下來的內容都寫完的，但是今天白天開了會，傳了些代碼打了個包，就被耽擱了這一篇來講一下 IndexLink和 onlyActiveOnIndex的一些問題

老習慣先安利一下：https://github.com/ddwhan0123/Useful-Open-Source-Android

例子的源碼都傳git了，源碼地址：https://github.com/ddwhan0123/ReactDemo

知識來源：https://github.com/reactjs/react-router-tutorial

前兩天寫了一些例子，包括普通跳轉，嵌套，帶參跳轉等等，這一篇主要來實現一個常用功能 “回到首頁“。

之前的例子裏我們通過訪問/來進入首頁

<Route path="/" component={First}></Route>

但是其實我們Main.js這個頁面他沒有頁面內容，我們一開始就進入了First.js

那麼如何讓我們的Main.js有內容呢？

可以使用IndexRoute

先來新建一個模擬的頁面

Six.js

import React from 'react';

export default React.createClass({
  render(){
    return (
      <div>
        <h3>this is Six</h3>
      </div>
    )
  }
})

也就是刷出一句話

要讓Main.js能顯示內容需要2步

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

  <IndexRoute component={Six}/>

實質上他讓本來空空的根路徑多了一個Six組件


<First>
  <Six/>
</First>

這還不夠還需要在 First.js裏做一些修改，如下

   {this.props.children || <Six/>}

這使得<Six/>成爲了根路由的子組件,它成爲父節點的this.props.children

內容理解有差異或者錯誤大街可以給我提，原文地址：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes

接下來我們來提一下如何做一個返回頁，最簡單的方式是，寫一個路由鏈過去，這很方便很簡單，像這樣

<NavLink to="/">To First</NavLink>

官方不推薦我們這麼幹，因爲跳轉根路由會丟失一些內容，諸如activeClassName，activeStyle什麼的。

官方推薦的是精確匹配方式 IndexLink

要是用還是要導包

import { IndexLink } from 'react-router'

然後使用

<IndexLink to="/" activeClassName="active">To First</IndexLink>

就行了

你還記得我們自己封裝的<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 (
      <div>
        <NavLink to="/" onlyActiveOnIndex>To First</NavLink><br></br>
        <H3>i am two h3</H3>
      </div>
    );
  }
})