react-路由和Ant design

路由的使用

react-router

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" }]]
}

electron技術