什么是路由
现代前端应用都是 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>