当前位置: 萬仟网 > IT编程>开发语言>JavaScript > react-路由和Ant design

react-路由和Ant design

2020年01月18日 14:58  | 萬仟网IT编程  | 我要评论

路由的使用

import react from 'react'

// 如果要使用 路由模块,第一步,运行 yarn add react-router-dom 
// 第二步,导入 路由模块

// hashrouter 表示一个路由的跟容器,将来,所有的路由相关的东西,都要包裹在 hashrouter 里面,而且,一个网站中,只需要使用一次 hashrouter 就好了;
// route 表示一个路由规则, 在 route 上,有两个比较重要的属性, path   component
// link 表示一个路由的链接 ,就好比 vue 中的 <router-link to=""></router-link>
import { hashrouter, route, link } from 'react-router-dom'

import home from './components/home.jsx'
import movie from './components/movie.jsx'
import about from './components/about.jsx'


// 导入 日期选择组件
import { datepicker } from 'antd'


export default class app extends react.component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    // 当 使用 hashrouter 把 app 根组件的元素包裹起来之后,网站就已经启用路由了
    // 在一个 hashrouter 中,只能有唯一的一个根元素
    // 在一个网站中,只需要使用 唯一的一次 <hashrouter></hashrouter> 就行了
    return <hashrouter>
      <div>
        <h1>这是网站的app根组件</h1>

        <datepicker></datepicker>

        <hr />

        <link to="/home">首页</link>&nbsp;&nbsp;
        <link to="/movie/top250/10">电影</link>&nbsp;&nbsp;
        <link to="/about">关于</link>

        <hr />

        {/* route 创建的标签,就是路由规则,其中 path 表示要匹配的路由,component 表示要展示的组件 */}
        {/* 在 vue 中有个 router-view 的路由标签,专门用来放置,匹配到的路由组件的,但是,在 react-router 中,并没有类似于这样的标签,而是 ,直接把 route 标签,当作的 坑(占位符) */}
        {/* route 具有两种身份:1. 它是一个路由匹配规则; 2. 它是 一个占位符,表示将来匹配到的组件都放到这个位置, 如果想让路由规则,进行精确匹配,可以为 route,添加 exact 属性,表示启用精确匹配模式 */}
        <route path="/home" component={home}></route>

        <hr />

        {/* 注意:默认情况下,路由中的规则,是模糊匹配的,如果 路由可以部分匹配成功,就会展示这个路由对应的组件 */}
        {/* 如果要匹配参数,可以在 匹配规则中,使用 : 修饰符,表示这个位置匹配到的是参数 */}
        <route path="/movie/:type/:id" component={movie} exact></route>

        <hr />

        <route path="/about" component={about}></route>
      </div>
    </hashrouter>
  }
}

其中一个组件

获取路由参数

import react from 'react'

export default class movie extends react.component {
  constructor(props) {
    super(props)
    this.state = {
      routeparams: props.match.params
    }
  }

  render() {
    console.log(this);
    // 如果想要从路由规则中,提取匹配到的参数,进行使用,可以使用 this.props.match.params.*** 来访问
    return <div>
      {/* movie --- {this.props.match.params.type} --- {this.props.match.params.id} */}

      movie --- {this.state.routeparams.type} --- {this.state.routeparams.id}

    </div>
  }
}

ant design

使用在上面的代码有体现

// js打包入口文件
// 1. 导入包
import react from 'react'
import reactdom from 'react-dom'

import app from './app.jsx'

// 全局导入 ant design 的样式表
// 一般,我们使用的 第三方ui组件,它们的样式表文件,都是 以 .css 结尾的,所以,我们最好不要为 .css 后缀名的文件,启用 模块化;
// 我们推荐自己不要直接手写 .css 的文件,而是自己手写 scss 或 less 文件,这样,我们只需要为 scss 文件 或 less 文件启用模块化就好了;

// 由于 直接使用 ant design 的全部包,体积过大,所以,建议大家使用 按需导入,这样,能减少 bundle.js 文件的体积
// import 'antd/dist/antd.css'

// 使用 render 函数渲染 虚拟dom
reactdom.render(<app></app>, document.getelementbyid('app'))

按需导入配置

.baelrc

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime", ["import", { "libraryname": "antd", "style": "css" }]]
}

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com