React 初探 [八] react-router 基本使用与侧边栏切换功能

川长思鸟来 2022-11-28 13:17 250阅读 0赞

### react-router 说明 ###

1、react-router 相关理解

*  react 的一个插件库
 *  专门用来实现一个SPA应用
 *  基于react 的项目基本都会用到此库

2、SPA的理解

*  单页web 应用
 *  整个应用只有一个完整的页面
 *  点击页面中的链接不会刷新页面，本身也不会向服务器发送请求
 *  当点击链接时只会做页面的局部更新
 *  数据都需要通过ajax请求获取，并在前端异步展现

3、路由的理解

① 什么是路由？

a) .一个路由就是一个映射关系（key-value）

b).key 为路由路径，value 可能是function / component

② 路由分类

a).后台路由：node 服务器端路由，value 是function 用来处理客户端提交的请求并返回一个响应数据

b).前端路由：浏览器端路由，value 是 component ，当请求的是路由path 时，浏览器前端没有发送http 请求，但界面会更新显示对应的组件。

③ 后台路由

a).注册路由：router.get(path,function(req,res))

b).当node 接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据

④ 前端路由

a). 注册路由：<Route path = "/about" component=(About)>

b). 当浏览器的hash 变为\#about 时 ，当前路由组件就会变成About 组件

4、前端路由的实现

① history库

a).网址：自行去github 搜索吧

b). 管理浏览器会话历史（history）的工具库

c).包装的是原生BOM中window.history 和 window.location.hash

> 以上是对路由的一些说明总结，因为已经有vue 经验，也粗略学习过node.js ,所以对以上很好理解，router 路由器 可以管理路由，route 路由就是一种对应关系，以key value 的形式 ，固定了路径和function 或者 component 组件的对应关系。

### react-router 的基本使用 ###

废话不多说 官网太香了 [http://react-router.docschina.org/web/guides/philosophy][http_react-router.docschina.org_web_guides_philosophy]

1、react router 相关API

*  <BrowerRouter>
 *  <HashRouter>
 *  <Route>
 *  <Redirect>
 *  <Link>
 *  <NavLink>
 *  <Swithc>
 *  history

以上具体的就去官网看吧 ，并且每个都有对应的demo 简直优秀。

2、实践出真知

需求：使用react-router 实现侧边栏导航切换

效果如下，点击侧边栏切换 右侧切换显示不同的组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

开始项目

① 安装react router ===》npm install --save react-router-dom

② 引入bootstrap.css 文件 ===》项目中的样式直接使用的bootstrap 所以需要

③ 拆分组件 根组件 APP ，路由组件 About 和 Home ，虽然放哪不重要，但是在开发中同vue 路由组件放在pages 或者 views 文件夹下

④ 关注使用react router 实现需要关注的点 主要代码如下

a). app 根组件需要使用 路由包裹，因此 index.js 项目入口文件需要引入 BrowserRouter

import React from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'
    // import App from './App'
    // import App from './componments/app/App.jsx'
    // react-router demo
    // import App from './app/app-router.jsx'
    import { BrowserRouter } from 'react-router-dom'
    
    import App from './app/app-router.jsx'
    import * as serviceWorker from './serviceWorker'
    
    ReactDOM.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>,
    
      document.getElementById('root'),
    )
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister()

b). 根组件App 中怎么实现路由导航 使用前端路由的注册方式 NavLikn + Route, 引入组件 对应路径即可 主要代码如下 ：

// import React from 'react'
    import React, { Component } from 'react'
    
    import { NavLink, Switch, Route, Redirect } from 'react-router-dom'
    
    import About from '../views/About.jsx'
    import Home from '../views/Home.jsx'
    
    import '../App.css'
    class App extends Component {
      render() {
        return (
          <div className="App">
            <header classNameName="site-header jumbotron">
              <div className="container">
                <div className="row">
                  <div className="col-xs-12">
                    <h1>React Router Demo</h1>
                  </div>
                </div>
                <div className="row">
                  <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                      <NavLink className="list-group-item" to="/about">
                        About
                      </NavLink>
                      <NavLink className="list-group-item" to="/home">
                        Home
                      </NavLink>
                    </div>
                  </div>
                  <div className="col-xs-6">
                    <div className="panel">
                      <div className="panel-body">
                        <Switch>
                          <Route path="/about" component={About}></Route>
                          <Route path="/home" component={Home}></Route>
                          <Redirect to="/about"></Redirect>
                        </Switch>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </header>
          </div>
        )
      }
    }
    // function App() {}
    
    export default App

c). About 和 Home 组件就按需完成就可以了

以上是react router 小demo的主要代码，完整代码已经提交到 git 了 地址

### 项目地址 ###

[https://gitee.com/xiaozhidayu/my-react][https_gitee.com_xiaozhidayu_my-react]

> 对于编程学习来说 敲一敲还是会更多点收获，在react 入门的路上越走越顺 ，come on!

[http_react-router.docschina.org_web_guides_philosophy]: http://react-router.docschina.org/web/guides/philosophy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221124/9f62edaf77214c3a8064f0199191a494.png
[https_gitee.com_xiaozhidayu_my-react]: https://gitee.com/xiaozhidayu/my-react