试着用React写项目-利用react-router解决跳转路由等问题

Posted 王亟亟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了试着用React写项目-利用react-router解决跳转路由等问题相关的知识,希望对你有一定的参考价值。

转载请注明出处:王亟亟的大牛之路

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

老习惯先安利一下: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>
    );
  }
})

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

进入首页 点击 Two
这里写图片描述

到了第二页点返回键就可以回到第一页了
这里写图片描述

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

以上是关于试着用React写项目-利用react-router解决跳转路由等问题的主要内容,如果未能解决你的问题,请参考以下文章

试着用React写项目-利用Webpack搭环境

试着用React写项目-利用styled-components解决样式问题

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

脚手架初始化 react 项目 react-router 路由

[react-router] 请你说说react的路由的优缺点?

react-router3