• 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 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">
                  </NavLink>
              <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>
        </header>
// function App() {}
export default App
   c). About 和 Home 组件就按需完成就可以了
 
以上是react router 小demo的主要代码，完整代码已经提交到 git 了 地址
 
https://gitee.com/xiaozhidayu/my-react     
 
 
对于编程学习来说 敲一敲还是会更多点收获，在react 入门的路上越走越顺 ，come on!
 
                    react-router 说明1、react-router 相关理解2、SPA的理解3、路由的理解4、前端路由的实现react-router 的基本使用=====督促自己完成======
				
koaReact路由器
koa 2中间件，用于React服务器端渲染和使用。
 寻找对React Router 3的支持，请参阅文档。 尝试React Router 5，尽管它很棒！
要安装koa-react-router ：
  npm install koa-react-router react react-dom react-router --save
注意： react react-dom和react-router都是koa-react-router peerDependencies 。
 可以将koa-react-router轻松安装在koa 2应用程序中，如下所示：
  // index.js
  import Koa from 'koa' ;
  import reactrouter from 'koa-react-router' ;
  import App from './App' ;
  import Container from './containers/PageContainer' ;
  const app = new Koa ( ) ;
今天是学习react的第二天啦，我的第一个小目标是将平时使用的todo清单软件通过react在web端一比一的实现所有功能！
如果想要看实现的效果可以通过  react-todo gitee仓库 拉取代码查看噢
前面写的文章都会放在前言中：
# vue转react的第一天~React基础框架的构建(Create React App+Tailwind css+Material ui)
配置eslint
在今天的开发开始前，我想先配置一下eslint实现一个代码格式的检查，避免从一开始学习react我的
　　对于React， 去年就有耳闻， 挺不想学的， 前端那么多东西， 学了一个框架又有新框架要学????，反正内心是拒绝的， 这几天有空研究一下ReactJS，然后自己写了几个小案例， 发现和自己以前写的单向DOM数据流输出的效果差不多，一个JS单向数据流动库----one way binding
　　使用React写了几个Demo以后， 发现React还是很好用的， 因为...
				
<ul class="nav">
<li onClick={() => this.changeFontColor(0)} className={`${0 === this.state.active ? 'active' : ''}`}>点击1</li>
<li onClick={() => this.changeFontColor(1)...
				
React Router是React官方提供的路由库，而react-router-dom是基于React Router实现的针对web应用的路由库。因此，react-router-dom是React Router的一个扩展库，它专门用于在web应用中实现路由功能。 
React Router是一个基于React的路由库，它提供了一种简单的方式来管理React应用的路由。它是一个独立的库，可以用于各种React应用。React Router提供了几种不同的路由组件，包括Router、Route、Link、Switch等，用于帮助我们开发单页面应用（SPA）。
而react-router-dom则是React Router的封装，它提供了一些额外的组件，如BrowserRouter、Link、Route等，以便于我们在web应用中使用React Router。BrowserRouter是React Router的一个实现，它使用HTML5的history API来实现路由切换，可以让我们使用类似于传统web应用的URL路径来访问不同的页面。
因此，React Router是一个通用的路由库，而react-router-dom是React Router的针对web应用的封装库。在web应用中使用React Router时，我们通常会使用react-router-dom库。