18、React中的路由
React中路由的基本使用
- 在react中使用路由首先需要安装react的路由模块 npm install react-router-dom -S。
- 在项目主入口文件index.js或根组件处导入。
import {HashRouter,Route,Link} from 'react-router-dom'
HashRouter:表示路由的根容器，将来所有跟路由相关的内容都需要包裹在HashRouter里面，一个网站中只需要一个HashRouter就好。
Route 路由规则，有两个重要的属性 path和component。
Link表示路由的连接，相当于Vue中的<router-link-to=""></router-link>
使用实例
index.js
import React from 'react'
import ReactDom from 'react-dom'
import App from '@/components/App'
ReactDom.render(<div>
<App></App>
</div>,document.getElementById('app'))
根组件
import React from 'react'
import Home from '@/components/Home'
import Movie from '@/components/Movie'
import About from '@/components/About'
//在react中使用路由需要安装路由模块 npm install react-router-dom -S,之后需要在主入口将其导入
import {HashRouter,Route,Link} from 'react-router-dom'
//HashRouter表示路由的根容器，将来所有跟路由相关的内容都需要包裹在HashRouter里面，一个网站中只需要一个HashRouter就好
//Route 路由规则，有两个重要的属性 path和component
//Link表示路由的连接，相当于Vue中的<router-link-to=""></router-link>
export default class App extends React.Component{
constructor(props){
super(props)
this.state = {}
}
render(){
//用HashRouter来包裹根组件, 为当前网站启用路由,在HashRouter中只能有唯一一个根元素，如此处的div
return <HashRouter>
<div>
<h3>我是网站App的根组件</h3>
<Link exact to = "/">首页</Link>
<Link to = "/movie">电影</Link>
<Link to = "/about">我的</Link>
<hr/>
{/* 添加路由规则,path表示匹配的路由，component表示需要展示的组件*/}
{/* 在Vue中有<router-view></router-view>这样的路由标签，专门用来放匹配到的路由组件，在react中，没有router-view，而是直接使用Route标签来当做占位符。 */}
{/* react中的Route有两种身份，首先是路由规则，其次还是占位符 */}
{/* 这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配 */}
<Route exact path = "/" component = {Home}></Route>
<Route path = "/movie" component = {Movie}></Route>
<Route path = "/about" component = {About}></Route>
</div>
</HashRouter>
}
}
其他组件
以Home组件为例
import React from 'react'
export default class Home extends React.Component{
constructor(props){
super(props)
this.state = {}
}
render(){
return <div>
<h4>我是首页</h4>
</div>
}
}
路由传参，匹配路由参数
在路由规则中向movie组件中传参如下
import React from 'react'
import Home from '@/components/Home'
import Movie from '@/components/Movie'
import About from '@/components/About'
//在react中使用路由需要安装路由模块 npm install react-router-dom -S,之后需要在主入口将其导入
import {HashRouter,Route,Link} from 'react-router-dom'
//HashRouter表示路由的根容器，将来所有跟路由相关的内容都需要包裹在HashRouter里面，一个网站中只需要一个HashRouter就好
//Route 路由规则，有两个重要的属性 path和component
//Link表示路由的连接，相当于Vue中的<router-link-to=""></router-link>
export default class App extends React.Component{
constructor(props){
super(props)
this.state = {}
}
render(){
//用HashRouter来包裹根组件, 为当前网站启用路由,在HashRouter中只能有唯一一个根元素，如此处的div
return <HashRouter>
<div>
<h3>我是网站App的根组件</h3>
<Link to = "/">首页</Link>
<Link to = "/movie/top100/5">电影</Link>
<Link to = "/about">我的</Link>
<hr/>
{/* 添加路由规则,path表示匹配的路由，component表示需要展示的组件*/}
{/* 在Vue中有<router-view></router-view>这样的路由标签，专门用来放匹配到的路由组件，在react中，没有router-view，而是直接使用Route标签来当做占位符。 */}
{/* react中的Route有两种身份，首先是路由规则，其次还是占位符 */}
{/* 默认情况下，react中的路由是模糊匹配的，如果路由可以部分匹配成功，就会展示这个路由对应的组件 */}
{/* 这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配 */}
{/* 在路由中想要传递参数可以在匹配规则中使用:修饰符，表示这个位置匹配到的是参数 */}
{/* 这里添加的replace的作用去除警告 Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack */}
<Route exact path = "/" component = {Home}></Route>
<Route exact path = "/movie/:type/:id" component = {Movie} replace></Route>
<Route path = "/about" component = {About}></Route>
</div>
</HashRouter>
}
}
Movie组件中获取路由中传递的参数
import React from 'react'
export default class Movie extends React.Component{
constructor(props){
super(props)
this.state = {
routeParams:props.match.params
}
}
render(){
// 如果想要在路由规则中提取匹配的参数进行使用可以使用this.props.match.params来访问
console.log(this.props.match.params)
return <div>
<h4>我是电影 参数为{this.state.routeParams.type}---{this.state.routeParams.id} </h4>
</div>
}
}
React中antd的使用
- antd是什么
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 - 为React项目启用Ant Design组件
1、安装 npm install antd -S
2、在主入口文件引入antd的样式表 import 'antd/dist/antd.css
3、在想使用antd组件的react组件中将antd组件导入
4、将导入的antd组件以标签的方式丢到使用的位置即可 - antd组件的按需导入
如果在引用第三方框架的时候，将整个css全部引入进来，虽然是可以的，但是打包之后的文件体积显得过大
有时候我们只引用了某个组件，那么这时再将整个的样式表全部引入就显得不是那么合适，所以可以通过配置将所需的样式按需自动加载,同时也避免了在主入口文件引入样式表。
实现按需导入的方式
1、安装用于按需加载组件代码和样式的 babel 插件。npm install babel-plugin-import
2、在.babellrc中的plugins中添加如下配置 ["import", { "libraryName": "antd", "style": "css" }]或者在babel-loader中配置
在.babellrc中配置如下
{
"presets":["env","stage-0","react"],
"plugins":["transform-runtime",["import", { "libraryName": "antd", "style": "css" }]]
}
React中使用antd组件，并实现按需加载的实例
index.js
import React from 'react'
import ReactDom from 'react-dom'
import Appone from '@/components/Appone'
//导入Ant-Design的样式表
// import 'antd/dist/antd.css'
//如果在引用第三方框架的时候，像上面这样将整个css全部引入进来，虽然是可以的，但是打包之后的文件体积显得过大
//有时候我们只引用了某个组件或者ui，那么这时再将整个的样式表全部引入就显得不是那么合适，所以可以通过配置将所需的样式按需自动加载
//同时也避免了在主入口文件引入样式表
//实现按需加载的方式
//1、安装用于按需加载组件代码和样式的 babel 插件npm install babel-plugin-import
//2、在.babellrc中的plugins中添加如下配置 ["import", { "libraryName": "antd", "style": "css" }]
ReactDom.render(<div>
<Appone></Appone>
</div>,document.getElementById('app'))
Appone.jsx
import React from 'react'
import locale from 'antd/es/date-picker/locale/zh_CN'
import {DatePicker} from 'antd'
export default class Appone extends React.Component{
constructor(props){
super(props)
this.state = {}
}
render(){
return <div>
<h3>使用ant-design</h3>
<DatePicker locale = {locale}></DatePicker>
</div>
}
}
网友评论