什么是路由
现代前端应用都是 SPA (Single Page Application 单页应用程序), 就是只有一个html页面的应用程序。 为了有效使用单个页面管理原来的多页面功能,前端路由就产生了
- 前端路由的功能: 让用户从一个页面导航到另一个页面
- 前端路由是一套 ur l路径 与 组件的对应关系
基本使用
使用步骤:
- 安装: npm i react-router-dom
- 导入路由的三个核心组件: Router / Route / Link
- 使用 Router 组件包裹整个应用内容
- 使用 Link 定义路由
- 使用 Route 定义路由对应的组件
import React from 'react'
import ReactDOM from 'react-dom'
// 导入路由组件
import {
BrowserRouter as Router, Route, Link } from 'react-router-dom'
// 定义了两个最基本的组件
const First = () => {
return <div>页面一的内容</div>
}
const Second = () => {
return <div>页面二的内容</div>
}
class App extends React.PureComponent {
render () {
return <Router>
<div>
{
/* 使用 Link 定义两个路由 */}
{
/* to: 要跳转到的url地址 */}
<Link to="/first">页面一</Link>
<Link to="/second">页面二</Link>
{
/* component: url地址对应的组件 */}
<Route path="/first" component={
First}></Route>
<Route path="/second" component={
Second}></Route>
</div>
</Router>
}
}
ReactDOM.render(<App />, document.querySelector('#app'))
路由组件
-
Router 组件: 包裹整个应用,一个 react 应用只需要一个
△ 常用两种 Router: HashRouter 和 BrowserRouter
△ (推荐)BroswerRouter 使用 history API 实现 (localhost:3000/first)import {BroswerRouter as Router, Route, Link } from 'react-router-dom
△ HashRouter 的url地址中多了个
# (localhost:3000/#/first)
-import {HashRouter as Router, Route, Link } from 'react-router-dom'
-
Link 组件: 用于指定导航链接
△ Link 组件会被编译成 a 标签,to属性会被编译成 href 地址
-
Route 组件: 定义 url 展示的组件,Route 写在哪里,组件就会被渲染到哪里
执行过程
- 点击 Link 组件(a 标签)时会修改url地址栏中的 pathname
- 路由监听到 url 地址变化之后,得到最新的 pathname,再遍历所以的 Route 组件。使用 pathname 和 Route 中的 path 进行比对,找到匹配的 Route
- 找到 pathname 对应的 Route 之后,再找到 componet 对应的组件进行编译、渲染
编程式导航
编程式导航就是通过 js 代码来进行跳转
- this.props.history.push( path )
- path 是要跳转到的url地址
- this.props.history.go(n)
- n: 前进或者后退几个页面
import React from 'react'
import ReactDOM from 'react-dom'
import {
BrowserRouter as Router, Route, Link} from 'react-router-dom'
// 登录组件, 点击 "登录" 按钮跳转到 /home
class Login extends React.Component {
login = () => {
this.props.history.push('/home')
}
render () {
return (
<div>
账号: <input type="text" /><br />
密码: <input type="password" /><br />
<input type="button" value="登录" onClick={
this.login} />
</div>
)
}
}
// Home组件,点击 "退出" 按钮跳转回 /login
class Home extends React.Component {
logout = () => {
this.props.history.push('/login')
// this.props.history.go(-1)
}
render () {
return (
<div>
<button onClick={
this.logout}>退出</button>
这是首页
</div>
)
}
}
class App extends React.Component {
render () {
return (
<Router>
<Link to="/login">登录</Link>
<Route path="/login" component={
Login}></Route>
<Route path="/home" component={
Home}></Route>
</Router>
)
}
}
ReactDOM.render(<App />, document.querySelector('#app'))
默认路由
目标: 浏览器地址栏是 localhost:3000/ 时,就能看到 login 页面
实现方式: 在 Route 组件配置path时,直接设置为 / 即可
<Router>
<Route path="/" component={
Login}></Route> <Route path="/home" component={
Home}></Route>
</Router>