一、React路由
1.1 什么是路由
路由是根据不同的url地址展示不同的内容或页面。
一个针对React而设计的路由解决方案,可以友好的解决组件和url的映射关系。
1.2 路由安装
npm install react-router-dom@5
1.3 路由使用
在src
文件夹下创建FilmRouter
文件夹,在里面创建views
文件夹,将之前我的这篇博客中moviecomponents
文件夹的3个组件复制进去:
在FilmRouter
文件夹下创建Router
文件夹,在Router
文件夹下创建ReactRouter.js
组件,写入如下代码:
import React, { Component } from 'react'
import {HashRouter, Route} from 'react-router-dom'
import Film from '../views/Film'
import Cinema from '../views/Cinema'
import Profile from '../views/Profile'
export default class ReactRouter extends Component {
render() {
return (
<HashRouter>
<Route path="/film" component={Film}></Route>
<Route path="/cinema" component={Cinema}></Route>
<Route path="/profile" component={Profile}></Route>
</HashRouter>
)
}
}
在FilmRouter
文件夹下创建index.js
,写入如下代码:
import React, { Component } from 'react'
import FRouter from './Router/ReactRouter'
export default class Index extends Component {
render() {
return (
<FRouter></FRouter>
)
}
}
在src
文件下index.js
引入修改:
效果:
1.4 路由重定向
在react路由体系中,万物皆组件,路由重定向写法如下:
<Redirect from="/" to="/film"></Redirect>
这写法为模糊匹配,可以看到,在访问/cinema
时还是重定向到/film
,所以我们要添加Switch
来进行精确匹配:
让Redirect
精确匹配,添加exact
如下:
1.5 匹配404
<Route component={NotFound}/>
在学习React的路上,如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。