美文网首页
CreateReactApp+ReactRouter4的使用

CreateReactApp+ReactRouter4的使用

作者: 悦者生存 | 来源:发表于2018-06-21 09:39 被阅读153次

路由基础介绍
1,什么是前端路由?

路由是根据不同的 url 地址展示不同的内容或页面

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据 url 的不同返回不同的页面实现的。

2,前端路由有什么优点和缺点?

优点

用户体验好,不需要每次都从服务器全部获取,快速展现给用户

缺点

使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存

单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置

我们使用create-react-app搭建的项目https://blog.csdn.net/github_squad/article/details/57452333

准备工作:安装react-router-dom
npm install react-router-dom --save // --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,运行时依赖

开始写react-router啦
以下代码,完全复制于 https://reacttraining.com/react-router/web/example/basic

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>     // 创建一个路由
    <div>
      <ul>  // Link 组件 相当于a标签,to属性相当于a标签中的href,可以打开控制台看到,
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>
      // 监听路由,地址栏的变化,,很抱歉exact的意思我现在都不知道,观察到exact 在跟路由下,和exact={activeOnlyWhenExact}
      <Route exact path="/" component={Home}/>  // 如果地址栏访问了跟路径,比如http://localhost:5005/  就会去渲染<Home /> 组件
      <Route path="/about" component={About}/>  // 如果地址栏访问了/about 路径,比如http://localhost:5005/about  就会去渲染<About/> 组件
      <Route path="/topics" component={Topics}/> // 如果地址栏访问了topics 路径,比如http://localhost:5005/topics  就会去渲染<Topics/> 组件
    </div>
  </Router>
)

3.动态路由

首先讲一下模糊匹配


image.png
const ParamsExample = () => (
  <Router>   // 在<Router>组件中,可以任意的写标签写布局,很嚣张。。
    <div>
      <h2>Accounts</h2>
      <ul>
        <li><Link to="/netflix">Netflix</Link></li>  // 同样,写了布局,又写了a标签
        <li><Link to="/zillow-group">Zillow Group</Link></li>
        <li><Link to="/yahoo">Yahoo</Link></li>
        <li><Link to="/modus-create">Modus Create</Link></li>
      </ul>

      <Route path="/:id" component={Child}/>  // 定义路由,现在想来,这是用地址栏传参啊
      // path里面的值是<Link>组件中的to的值,,,这个写法有些奇怪,/:id
      // 原来由路由渲染的组件都会自动的往组件中传递一个参数,这个参数包含了路由信息
      // 而:id 是一种官方规定的写法,阮一峰老师的文章里是说 这是通配符,,
      // http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu

    </div>
  </Router>
)
// 
// 这里的 { match } 相当于 parameter.match  不懂的话看ES6就懂了 
const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

4.嵌套路由

react-router-dom 又一个新属性 Switch

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from 'react-router-dom'

const NoMatchExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/old-match">Old Match, to be redirected</Link></li>
        <li><Link to="/will-match">Will Match</Link></li>
        <li><Link to="/will-not-match">Will Not Match</Link></li>
        <li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
      </ul>
      <Switch>
        <Route path="/" exact component={Home}/>
        <Redirect from="/old-match" to="/will-match"/>
        <Route path="/will-match" component={WillMatch}/>
        <Route component={NoMatch}/>       // 所有没有定义的路由都会匹配NoMatch组件
      </Switch>
    </div>
  </Router>
)

const Home = () => (
  <p>
    A <code>&lt;Switch></code> renders the
    first child <code>&lt;Route></code> that
    matches. A <code>&lt;Route></code> with
    no <code>path</code> always matches.
  </p>
)

const WillMatch = () => <h3>Matched!</h3>

const NoMatch = ({ location }) => (
  <div>
    <h3>No match for <code>{location.pathname}</code></h3>
  </div>
)

export default NoMatchExample

5.路由传参
this.props.history.push({pathname :"/device/list",query:{data:item})

接受参数 this.props.location.query.data

相关文章

  • CreateReactApp+ReactRouter4的使用

    路由基础介绍1,什么是前端路由? 路由是根据不同的 url 地址展示不同的内容或页面 前端路由就是把不同路由对应不...

  • iconfont的使用(下载使用)

    1、下载文件 2、在生命周期中引入项目 beforeCreate () { var domModule = ...

  • Gson的使用--使用注解

    Gson为了简化序列化和反序列化的过程,提供了很多注解,这些注解大致分为三类,我们一一的介绍一下。 自定义字段的名...

  • 记录使用iframe的使用

    默认记录一下----可以说 这是我第一次使用iframe 之前都没有使用过; 使用方式: 自己开发就用了这几个属...

  • with的使用

    下面例子可以具体说明with如何工作: 运行代码,输出如下

  • this的使用

    什么是this? this是一个关键字,这个关键字总是返回一个对象;简单说,就是返回属性或方法“当前”所在的对象。...

  • this的使用

    JS中this调用有几种情况 一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象...

  • ==的使用

    积累日常遇到的编码规范,良好的编码习惯,持续更新。。。 日常使用==用于判断的时候,习惯性将比较值写前面,变量写后...

  • this的使用

    1.默认绑定,就是函数立即执行。 函数立即执行就是指向window,但是如果是node环境,就是指向全局conso...

  • %in% 的使用

    写在前面:From 生信技能书向量难点之一:%in% 难点 (1)== 与 %in% 的区别== 强调位置,x和对...

网友评论

      本文标题:CreateReactApp+ReactRouter4的使用

      本文链接:https://www.haomeiwen.com/subject/dawxyftx.html