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

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

1、react router 相关API

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

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

2、实践出真知

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

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

      

 

 开始项目

      ① 安装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     

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