react ant java_react-路由和Ant design

路由的使用

import React from 'react'

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

// 第二步，导入 路由模块

// HashRouter 表示一个路由的跟容器，将来，所有的路由相关的东西，都要包裹在 HashRouter 里面，而且，一个网站中，只需要使用一次 HashRouter 就好了；

// Route 表示一个路由规则， 在 Route 上，有两个比较重要的属性， path component

// Link 表示一个路由的链接 ，就好比 vue 中的

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 中，只能有唯一的一个根元素

// 在一个网站中，只需要使用 唯一的一次 就行了

return

这是网站的APP根组件

---

首页  

电影  

关于

---

{/* Route 创建的标签，就是路由规则，其中 path 表示要匹配的路由，component 表示要展示的组件 */}

{/* 在 vue 中有个 router-view 的路由标签，专门用来放置，匹配到的路由组件的，但是，在 react-router 中，并没有类似于这样的标签，而是 ，直接把 Route 标签，当作的 坑(占位符) */}

{/* Route 具有两种身份：1. 它是一个路由匹配规则； 2. 它是 一个占位符，表示将来匹配到的组件都放到这个位置， 如果想让路由规则，进行精确匹配，可以为 Route，添加 exact 属性，表示启用精确匹配模式 */}

---

{/* 注意：默认情况下，路由中的规则，是模糊匹配的，如果 路由可以部分匹配成功，就会展示这个路由对应的组件 */}

{/* 如果要匹配参数，可以在 匹配规则中，使用 : 修饰符，表示这个位置匹配到的是参数 */}

---

}

}

其中一个组件

获取路由参数

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

{/* Movie --- {this.props.match.params.type} --- {this.props.match.params.id} */}

Movie --- {this.state.routeParams.type} --- {this.state.routeParams.id}

}

}

使用在上面的代码有体现

// 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(, document.getElementById('app'))

按需导入配置

.baelrc

{

"presets": ["env", "stage-0", "react"],

"plugins": ["transform-runtime", ["import", { "libraryName": "antd", "style": "css" }]]

}