React 學習筆記（2） 路由和UI組件使用

安裝依賴

cnpm install react-router-dom -S
// 或
yarn add react-router-dom

導入

// index.js
import React from 'react'
import ReactDOM from 'react-dom'

import App from "@/App"

ReactDOM.render(<div>
  <App></App>
</div>, document.getElementById('app'))

 

// App.jsx
import React from "react"
// HashRouter 表示一個路由的根容器，未來全部的路由相關的東西，都要包裹在 HashRouter 裏，並且，一個網站中只使用一次
// Route 表示一個路由規則，在 Route 上有2個比較重要的屬性， path 和 component
// Link 表示一個路由的連接，比如 vue 中的 <router-link to=""></router-link>
import { HashRouter, Route, Link, Redirect } from 'react-router-dom'

// 使用 antd UI
import { DatePicker } from 'antd'
 
import Home from "@/conpenents/route/Home"
import Movie from "@/conpenents/route/Movie"
import About from "@/conpenents/route/About"

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: '這是 BindThis組件中的 msg 消息'
    }
  }
  render() {
    // 啓用路由
    // HashRouter中，只能有惟一的根元素
    // 一個網站中，只須要使用惟一的一次 <HashRouter>
    return <HashRouter>
      <div>
        <h1>這是 App 根組件 </h1>
        <DatePicker />
        <hr/>
        <Redirect to="/home" />
        <Link to="/home">首頁</Link>&nbsp;
        <Link to="/movie/top250/102">電影</Link>&nbsp;
        <Link to="/about">關於</Link>
        <hr/>
        {/* 路由規則 */}
        <Route path="/home" component={ Home }></Route>
        {/* 路由參數匹配 */}
        {/* 獲取路由參數：this.props.match.params */}
        <Route path="/movie/:type/:id" component={ Movie } exact ></Route>
        <Route path="/about" component={ About }></Route>
        {this.props.children}
      </div>
    </HashRouter>
  }

}

export default App

 

// Home.jsx
import React from "react"

class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: '這是 Home 組件'
    }
  }
  render() {
    return <div>
        <h1>{ this.state.msg }</h1>
      </div>
  }

}

export default Home

 

// Movie.jsx
import React from "react"

class Movie extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      // 方便獲取路由參數
      routeParams: props.match.params,
      msg: '這是 Movie 組件'
    }
  }
  render() {
    console.log(this)
    console.log(this.props.match.params)
    return <div>
        <h1>{ this.state.msg }</h1>
        <p>{ this.state.routeParams.type } - { this.state.routeParams.id }</p>
      </div>
  }

}

export default Movie

 

// About.jsx
import React from "react"

class About extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: '這是 About 組件'
    }
  }
  render() {
    return <div>
        <h1>{ this.state.msg }</h1>
      </div>
  }

}

export default About

注意：按需導入antd，須要配置.babelrc：按需加載