react-router-dom路由的基本使用
安装包
yarn add react-router-dom
导入路由模块
import ReactDOM from 'react-dom'
HashRouter 表示一个路由的跟容器,将来,所有的路由相关的东西,都要包裹在 HashRouter 里面,而且,一个网站中,只需要使用一次 HashRouter 就好了;
Route 表示一个路由规则, 在 Route 上,有两个比较重要的属性, path component
Link 表示一个路由的链接 ,就好比 vue 中的 <router-link to=""></router-link>
import { HashRouter, Route, Link } from 'react-router-dom'
使用 HashRouter 把 App 根组件的元素包裹起来,网站就已经启用路由
在一个 HashRouter 中,只能有唯一的一个根元素
在一个网站中,只需要使用 唯一的一次 <HashRouter></HashRouter> 就行了
render() {
return <HashRouter>
<div>
</div>
</HashRouter>
}
Link 表示一个路由的链接 ,就好比 vue 中的 <router-link to=""></router-link>
render() {
return <HashRouter>
<div>
<h1>这是网站的APP根组件</h1>
<hr />
<Link to="/home">首页</Link>
<Link to="/movie">电影</Link>
<Link to="/about">关于</Link>
</div>
</HashRouter>
}
Route 创建的标签,就是路由规则,其中 path 表示要匹配的路由,component 表示要展示的组件,在 vue 中有个 router-view 的路由标签,专门用来放置匹配到的路由组件的,但是在 react-router 中,并没有类似于这样的标签,而是直接把 Route 标签,当作的占位符
因此Route 具有两种身份:
1. 是一个路由匹配规则
2. 是 一个占位符,表示将来匹配到的组件都放到这个位置, 如果想让路由规则,进行精确匹配,可以为 Route,添加 exact 属性,表示启用精确匹配模式
render() {
return <HashRouter>
<div>
<h1>这是网站的APP根组件</h1>
<hr />
<Link to="/home">首页</Link>
<Link to="/movie">电影</Link>
<Link to="/about">关于</Link>
<hr />
<Route path="/home" component={Home}></Route>
<hr />
<Route path="/movie" component={Movie}></Route>
<hr />
<Route path="/about" component={About}></Route>
</div>
</HashRouter>
}
匹配路由参数
<Link to="/movie/top250/10">电影</Link>
默认情况下,路由中的规则,是模糊匹配的,如果路由可以部分匹配成功,就会展示这个路由对应的组件,所以使用exact这个属性,如果要匹配参数,可以在匹配规则中,使用 : 修饰符,表示这个位置匹配到的是参数
<Route path="/movie/:type/:id" component={Movie} exact></Route>
在movie组件实例中:
打印movie组件实例可以发现,通过路由传进来的参数都放在了组件实例的match的params属性下面,所以如果想要从路由规则中,提取匹配到的参数进行使用,可以使用 this.props.match.params.*** 来访问
export default class Movie extends React.Component {
constructor(props) {
super(props)
this.state = {
routeParams: props.match.params
}
}
render() {
console.log(this);
return <div>
{/* Movie --- {this.props.match.params.type} --- {this.props.match.params.id} */}
Movie --- {this.state.routeParams.type} --- {this.state.routeParams.id}
</div>
}
}