React之路由的基本使用和执行过程

忘是亡心i 2022-10-25 04:40 110阅读 0赞

### 路由 ###

*  什么是路由
 *  基本使用
 *  路由组件
 *  执行过程
 *  编程式导航
 *  默认路由

# 什么是路由 #

现代前端应用都是 SPA （Single Page Application 单页应用程序）, 就是只有一个html页面的应用程序。 为了有效使用单个页面管理原来的多页面功能，前端路由就产生了

*  前端路由的功能： 让用户从一个页面导航到另一个页面
 *  前端路由是一套 ur l路径 与 组件的对应关系

# 基本使用 #

使用步骤：

1.  安装： npm i react-router-dom
2.  导入路由的三个核心组件： Router / Route / Link
3.  使用 Router 组件包裹整个应用内容
4.  使用 Link 定义路由
5.  使用 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 写在哪里，组件就会被渲染到哪里

# 执行过程 #

1.  点击 Link 组件（a 标签）时会修改url地址栏中的 pathname
2.  路由监听到 url 地址变化之后，得到最新的 pathname，再遍历所以的 Route 组件。使用 pathname 和 Route 中的 path 进行比对，找到匹配的 Route
3.  找到 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时，直接设置为 / 即可