现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小,所以更受欢迎。为了有效的使用单个页面来管理多页面的功能,前端路由应运而生。
- 前端路由功能:让用户从一个视图(组件)导航到另一个视图(组件)
- 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系
- 使用React路由简单来说,就是配置路径和组件
路由使用
3.2.1、安装路由模块
路由模块不是react自带模块,需要安装第3方模块
npm i -S react-router-dom
相关组件
- Router组件:包裹整个应用,一个React应用只需要使用一次
Router: HashRouter和BrowserRouter
HashRouter: 使用URL的哈希值实现 (localhost:3000/#/first)
BrowserRouter:使用H5的history API实现(localhost3000/first)
- Link/NavLink组件:用于指定导航链接(a标签)
最终Link会编译成a标签,而to属性会被编译成 a标签的href属性
- Route组件:指定路由展示组件相关信息(组件渲染)
path属性:路由规则,这里需要跟Link组件里面to属性的值一致
component属性:展示的组件
各组件关系示意图
使用路由
在src/App.js中导入路由组件
import React, { Component } from 'react'
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import News from './pages/News'
class App extends Component {
render() {
return (
<Router>
<h3>导航区域</h3>
<hr />
<ul>
<li>
<Link to="/home">首页</Link>
</li>
<li>
<Link to="/news">新闻</Link>
</li>
</ul>
<hr />
<Route path="/home" component={Home} />
<Route path="/news" component={News} />
</Router>
);
}
}
export default App
在src/index.js文件中定义一个路由模式
在App.jsx文件中定义路由导航
声明式导航
使用Link或NavLink组件完成声明式导航的定义
import React, { Component } from 'react' // react中的路由规则都是以组件的方式定义 import { Route, Link, NavLink } from 'react-router-dom' // 导入渲染的视图组件 import Home from './views/Home' import News from './views/News' import Profile from './views/Profile' // 样式 import './assets/css/app.css' import Detail from './views/Detail' class App extends Component { constructor(props) { super(props); } render() { return ( <> {/* <ul> { // 字符串形式申明路由 } <li><Link to="/">首页</Link></li> <li><Link to="/news">新闻列表</Link></li> { // 对象形式 } <li><Link to={{ pathname: '/profile' }}>个人中心</Link></li> </ul> <br /><br /> <br /> */} <ul> <li><NavLink exact activeClassName="active" to="/">首页</NavLink></li> <li><NavLink activeClassName="active" to="/news">新闻列表</NavLink></li> <li><NavLink activeClassName="active" to="/profile">个人中心</NavLink></li> </ul> <hr /> {/* path访问的uri路径 component就是匹配成功后渲染的组件 */} {/* exact 严格匹配 */} {/* Rouet组件中匹配成功的渲中会自动在this.props添加路由导航相关属性方法 */} <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/profile" component={Profile} /> {/* 动态路由 */} <Route path="/detail/:id" component={Detail} /> </> ) } } export default App
路由参数
在Route定义渲染组件时给定动态绑定的参数
- params
在路由目标页面中通过this.props.match.params得到
- query
通过地址栏中的 ?key=value&key=value,通过this.props.location.search
- state
隐式转参,一点用于数据的收集 this.props.location.state
获取路由中的参数数据