React脚手架

使用create-react-app创建react应用

3.1 react脚手架

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

包含了所有需要的配置（语法检查、jsx编译、devServer…）

下载好了所有相关的依赖

可以直接运行一个简单效果

react提供了一个用于创建react项目的脚手架库: create-react-app

项目的整体技术架构为: react + webpack + es6 + eslint

使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3.2 创建项目并启动

方法一
第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

方法二
直接使用 npx 创建项目，你需要保证你的电脑上 Node >= 8.10 和 npm >= 5.6，在这个前提下
npx create-react-app hello-react
cd hello-react
npm start

3.3 react脚手架项目结构

​ public ---- 静态资源文件夹

​ favicon.icon ------ 网站页签图标

​ index.html -------- 主页面

​ logo192.png ------- logo图

​ logo512.png ------- logo图

​ manifest.json ----- 应用加壳的配置文件

​ robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

​ App.css -------- App组件的样式

​ App.js --------- App组件

​ App.test.js ---- 用于给App做测试

​ index.css ------ 样式

​ index.js ------ 入口文件

​ logo.svg ------- logo图

​ reportWebVitals.js​ ---- 页面性能分析文件(需要web-vitals库的支持)

​ setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)

快捷键：rcc

快捷键：rsf

3.4 功能界面的组件化编码流程（通用）

拆分组件: 拆分界面,抽取组件

实现静态组件: 使用组件实现静态页面效果

实现动态组件

一、todoList案例相关知识点
1.拆分组件、实现静态组件，注意：className、style的写法
2.动态初始化列表，如何确定将数据放在哪个组件的state中？
——某个组件使用：放在其自身的state中
——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
3.关于父子之间通信：
1.【父组件】给【子组件】传递数据：通过props传递
2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
5.状态在哪里，操作状态的方法就在哪里

/*
    todos: [
      {id: '001', name: '吃饭', done: true},
      {id: '002', name: '睡觉', done: true},
      {id: '003', name: '打代码', done: false},
    ]
*/

/*  父传子  */
 <List todos={todos}/>  //父
 this.props.todos       //子    

/*  子传父  */
 this.props.addTodo(todoObj)  //子
 <Header addTodo={this.addTodo}/>    addTodo = (todoObj) => {}  //父

//子
 handleKeyUp = (event) => {
    const {keyCode, target} = event
    //判断是否是回车
    if (keyCode !== 13) return
    //添加的todo名字不能为空
    if (target.value.trim() == '') {
      alert('输入不能为空')
      return;
    }
    const todoObj = {id: nanoid(), name: target.value, done: false}
    this.props.addTodo(todoObj)
    //  清空输入
    target.value = ''
  }

//父
  addTodo = (todoObj) => {
    const {todos} = this.state            //获取原todos
    const newTodos = [todoObj, ...todos]     //追加
    this.setState({todos: newTodos})       //更新状态
  }
 <Header addTodo={this.addTodo}/> 



//父  {...todo}写法
<ul className="todo-main">
  {
    todos.map(todo => {
      return <Item key={todo.id} {...todo}></Item>
    })
  }
</ul>

//子
<span>{this.props.name}</span>

3.5 react脚手架配置代理

方法一 : 在package.json中追加如下配置：

"proxy":"http://localhost:5000"

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

// axios.get('http://localhost:3000/index.html').then(
    axios.get('http://localhost:3000/students').then(
      response => {
        console.log('成功了',response.data);
      },
      error => {
        console.log('失败了',error);
      }
    )

http://localhost:3000/index.html

http://localhost:3000/students

方法二

5. 第一步：创建代理配置文件

   在src下创建配置文件：src/setupProxy.js
   

6. 编写setupProxy.js配置具体代理规则：

   const {createProxyMiddleware}  = require('http-proxy-middleware')
   
   module.exports = function(app) {
     app.use(
       createProxyMiddleware('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
         target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
         changeOrigin: true, //控制服务器接收到的请求头中host字段的值
         /*
         	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
         	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
         */
         pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
       }),
       createProxyMiddleware('/api2', { 
         target: 'http://localhost:5001',
         changeOrigin: true,
         pathRewrite: {'^/api2': ''}
       })
     )
   }
   

说明
7. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
8. 缺点：配置繁琐，前端请求资源时必须加前缀。

解构赋值补充知识点

  let obj = {a: {b: {c: 1}}}
  console.log(obj.a.b.c);  //1

  //  连续解构赋值
  let {a: {b: {c}}} = obj
  console.log(c);          //1

  //  连续解构赋值 + 重命名
  let {a: {b: {c: data}}} = obj
  console.log(data);       //1

React ajax

4.1 理解

前置说明
1.React本身只关注于界面, 并不包含发送ajax请求的代码
2.前端应用需要通过ajax请求与后台进行交互(json数据)
3.react应用中需要集成第三方ajax库(或自己封装)
常用的ajax请求库
1.jQuery: 比较重, 如果需要另外引入不建议使用
2.axios: 轻量级, 建议使用
1)封装XmlHttpRequest对象的ajax
2) promise风格
3)可以用在浏览器端和node服务器端

4.2 消息订阅-发布机制

1.工具库: PubSubJS
2.下载: npm install pubsub-js --save
3.使用:
1)import PubSub from ‘pubsub-js’ //引入
2)PubSub.subscribe(‘delete’, function(data){ }); //订阅
3)PubSub.publish(‘delete’, data) //发布消息
案例—github用户搜索

//search.jsx
class Search extends Component {
  search = () => {
    //获取用户请求
    const {keyWordElement: {value: keyWord}} = this  //也是解构赋值
    console.log(keyWord);
    this.props.updateAppState({isFirst: false, isLoading: true})
    //  发送网络请求
    // axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
    axios.get(`/api1/search/users?q=${keyWord}`).then(
      response => {
        this.props.updateAppState({isLoading: false, users: response.data.items})
      },
      error => {
        this.props.updateAppState({isLoading: false, err: error.message})
      }
    )
  }
  render() {
    return (
      <div>
        <section className="jumbotron">
          <h3 className="jumbotron-heading">搜索 Github 用户</h3>
          <div>
            <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
            <button onClick={this.search}>搜索</button>
          </div>
        </section>
      </div>
    );
  }
}

//App.jsx
class App extends Component {
  state = {
    users: [],
    isFirst: true, //是否第一次打开页面
    isLoading: false, //标识是否加载中
    err: '',//存储请求相关的错误信息
  }
  //更新APP的state
  updateAppState = (stateObj) => {
    this.setState(stateObj)
  }
  render() {
    return (
      <div>
        <div className="container">
          <Search updateAppState={this.updateAppState}></Search>
          <List {...this.state}></List>
        </div>
      </div>
    );
  }
}

//list.jsx
class List extends Component {
  render() {
    const {users, isFirst, isLoading, err} = this.props
    return (
      <div>
        <div className="row">
          {
            isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
              isLoading ? <h2>Loading...</h2> :
                err ? <h2 style={{color: 'red'}}>{err}</h2> :
                  users.map((userObj) => {
                    return (
                      <div className="card">
                        <a href={userObj.html_url} target="_blank" rel="noreferrer">
                          <img alt='head_portrait' src={userObj.avatar_url} style={{width: '100px'}}/>
                        </a>
                        <p className="card-text">{userObj.login}</p>
                      </div>
                    )
                  })
          }
        </div>
      </div>
    );
  }
}

消息订阅与发布

//search.jsx
import PubSub from 'pubsub-js'
search = () => {
    //获取用户请求
    const {keyWordElement: {value: keyWord}} = this  //也是解构赋值
    PubSub.publish('atguigu',{isFirst: false, isLoading: true})
    //  发送网络请求
    axios.get(`/api1/search/users?q=${keyWord}`).then(
      response => {
        PubSub.publish('atguigu',{isLoading: false, users: response.data.items})
      },
      error => {
        PubSub.publish('atguigu',{isLoading: false, err: error.message})
      }
    )
  }

//list.jsx
import PubSub from 'pubsub-js'
class List extends Component {
  state = {
    users: [],
    isFirst: true, //是否第一次打开页面
    isLoading: false, //标识是否加载中
    err: '',//存储请求相关的错误信息
  }

  componentDidMount() {
    this.token = PubSub.subscribe('atguigu', (msg, stateObj) => {
      this.setState(stateObj)
    })
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }

  render() {
    const {users, isFirst, isLoading, err} = this.state
    ......

4.3 扩展 — Fetch(不常用)

//  发送网络请求 -- 使用fetch (未优化)
     fetch(`/api1/search/users?q=${keyWord}`).then(
        response => {
          console.log('联系服务器成功了');
          return response.json()
        },
        error => {
          console.log('联系服务器失败了', error);
          return new Promise(()=>{})
        }
      ).then(
        response => {
          console.log('获取数据成功了', response);
        },
        error => {
          console.log('获取数据失败了',error);
        }
      )
      
 //  发送网络请求 -- 使用fetch (优化：最后统一用catch处理异常)
    fetch(`/api1/search/users?q=${keyWord}`).then(
      response => {
        console.log('联系服务器成功了');
        return response.json()
      },
    ).then(
      response => {
        console.log('获取数据成功了', response);
      },
    ).catch(
      (error) => {
        console.log('请求出错', error);
      }
    )
    
//使用async,await再优化 （注意在离得最近的函数上加async）
    try {
      const response = await fetch(`/api1/search/users?q=${keyWord}`)
      const data = await response.json()
      // console.log(data)
      PubSub.publish('atguigu', {isLoading: false, users: data.items})
    } catch (error) {
      // console.log('请求出错', error);
      PubSub.publish('atguigu', {isLoading: false, err: error.message})
    }

github搜索案例相关知识点
1.设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
2.ES6小知识点：解构赋值+重命名
let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名
3.消息订阅与发布机制
1.先订阅，再发布（理解：有一种隔空对话的感觉）
2.适用于任意组件间通信
3.要在组件的componentWillUnmount中取消订阅
4.fetch发送请求（关注分离的设计思想）
try {
const response= await fetch(/api1/search/users2?q=${keyWord})
const data = await response.json()
console.log(data);
} catch (error) {
console.log(‘请求出错’,error);
}

React路由

5.1 相关理解

SPA的理解
单页Web应用（single page web application，SPA）。

整个应用只有一个完整的页面。

点击页面中的链接不会刷新页面，只会做页面的局部更新。

数据都需要通过ajax请求获取, 并在前端异步展现。

路由的理解

1. 什么是路由?
   一个路由就是一个映射关系(key:value)
   key为路径, value可能是function或component

路由分类
1.后端路由：
1)理解： value是function, 用来处理客户端提交的请求。
2)注册路由： router.get(path, function(req, res))
3)工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

2.前端路由：
1)浏览器端路由，value是component，用于展示页面内容。
2)注册路由: < Route path=“/test” component={Test} >
3)工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

react-router-dom的理解
react的一个插件库。
专门用来实现一个SPA应用。
基于react的项目基本都会用到此库。

5.2. react-router-dom相关API

1.<rowserRouter>
2.<HashRouter>
3.<Route>
4.<Redirect>
5.<Link>
6.<NavLink>
7.<Switch>

5.2.2. 其它
1.history对象
2.match对象
3.withRouter函数

5.3 基本路由使用

//App.jsx
import React, {Component} from 'react';
//import {Link,Route} from 'react-router-dom'
import {NavLink,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

class App extends Component {
  render() {
    return (
      <div>
        <div className="container">
          <div className="row">
            <div className="col-xs-offset-2 col-xs-8">
              <div className="page-header"><h2>React Router Demo</h2></div>
            </div>
          </div>
          <div className="row">
            <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                {/*原生HTML中靠 <a> 跳转不同页面*/}
                {/*   <a className="list-group-item active" href="./about.html">About</a>
                <a className="list-group-item" href="./home.html">Home</a>*/}
                {/* React中路由链接实现切换组件--编写路由链接 */}
                //<Link className="list-group-item" to='/about'>About</Link>
               // <Link className="list-group-item" to='/home'>Home</Link>
                <NavLink activeClassName="atguigu" className="list-group-item" to='/about'>About</NavLink>
                <NavLink activeClassName="atguigu" className="list-group-item" to='/home'>Home</NavLink> 
             </div>
            </div>
            <div className="col-xs-6">
              <div className="panel">
                <div className="panel-body">
                  {/*注册路由*/}
                  <Route path="/about" component={About}></Route>
                  <Route path="/home" component={Home}></Route>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default App;

//Home.jsx
render() {
    return (
      <div>
        <h3>我是Home的内容</h3>
      </div>
    );
}

//index.js
import {BrowserRouter} from 'react-router-dom'
<BrowserRouter>
      <App/>
 </BrowserRouter>

//index.html
.atguigu{
      background-color: orange !important;
      color: white !important;
}

//封装组件
//App.jsx
import MyNavLink from './components/MyNavLink'
 //标签体内容是一个特殊的标签属性,在props里的 children属性里 
 <MyNavLink to='/about'>About</MyNavLink>
 <MyNavLink to='/home'>Home</MyNavLink>

//MyNavLink.jsx
import React, {Component} from 'react';
import {NavLink} from "react-router-dom";

class MyNavLink extends Component {
  render() {
    console.log(this.props);  //{to: '/about', children: 'About'}
    //const {to, children} = this.props
    return (
    /*<NavLink  activeClassName="atguigu" className="list-group-item" to={to}>{children}</NavLink>*/
    /*<NavLink activeClassName="atguigu" className="list-group-item" to={to} children={children}/>*/
    <NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
  )
  }
}

export default MyNavLink;

NavLink与封装NavLink

  		1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
  		2.标签体内容是一个特殊的标签属性
  		3.通过this.props.children可以获取标签体内容

路由的基本使用

     1.明确好界面中的导航区、展示区
      2.导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link>
      3.展示区写Route标签进行路径的匹配 <Route path='/xxxx' component={Demo}/>
      4.< App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>	

路由组件与一般组件

  	1.写法不同：
  				一般组件：<Demo/>
  				路由组件：<Route path="/demo" component={Demo}/>
  	2.存放位置不同：
  				一般组件：components
  				路由组件：pages
  	3.接收到的props不同：
  				一般组件：写组件标签时传递了什么，就能收到什么
  				路由组件：接收到三个固定的属性
  									history:
  												go: ƒ go(n)
  												goBack: ƒ goBack()
  												goForward: ƒ goForward()
  												push: ƒ push(path, state)
  												replace: ƒ replace(path, state)
  									location:
  												pathname: "/about"
  												search: ""
  												state: undefined
  									match:
  												params: {}
  												path: "/about"
  												url: "/about"

Switch的使用
1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。

//App.jsx
import {Route, Switch} from 'react-router-dom'
<Switch>
      <Route path="/about" component={About}></Route>
      <Route path="/home" component={Home}></Route>
      <Route path="/home" component={Test}></Route>
</Switch>

解决多级路径刷新页面样式丢失的问题
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter

 <Link className="list-group-item" to='/atguigu/about'>About</Link>
<Route path="/atguigu/about" component={About}></Route>

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

    <MyNavLink to='/about'>About</MyNavLink>
    <MyNavLink to='/home/a/b'>Home</MyNavLink>
         
    {/*注册路由*/}
     <Switch>
        <Route exact path="/about" component={About}></Route>
        <Route exact path="/home" component={Home}></Route>
     </Switch>

Redirect的使用
一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

import {Route, Switch,Redirect} from 'react-router-dom'
<Switch>
  <Route path="/about" component={About}></Route>
  <Route path="/home" component={Home}></Route>
  <Redirect to='/about'></Redirect>
</Switch>

5.4 嵌套路由

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的

  <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to='/home/news'>News</MyNavLink>
            </li>
            <li>
              <MyNavLink to='/home/message'>Message</MyNavLink>
            </li>
          </ul>
          {/*注册路由*/}
          <Switch>
            <Route path='/home/news' component={News}></Route>
            <Route path='/home/message' component={Message}></Route>
            <Redirect to='/home/news'></Redirect>
          </Switch>
 </div>

5.5. 向路由组件传递参数数据

			1.params参数
						路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
						注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
						接收参数：this.props.match.params
			2.search参数
						路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
						注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
						接收参数：this.props.location.search
						备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
			3.state参数
						路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
						注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
						接收参数：this.props.location.state
						备注：刷新也可以保留住参数

params 参数

//Message .jsx
import React, {Component} from 'react';
import {Link, Route} from 'react-router-dom'
import Detail from './Detail/index'
class Message extends Component {
  state = {
    messageArr: [
      {id: '01', title: '消息1'},
      {id: '02', title: '消息2'},
      {id: '03', title: '消息3'},
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map(msgObj => {
              return (
                <li key={msgObj.id}>
                  /*向路由组件传 params 参数*/
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
      /*声明接收 params 参数*/
        <Route path='/home/message/detail/:id/:title' component={Detail}></Route>
      </div>
    );
  }
}
export default Message;

//Detail.jsx
const DetailData = [
  {id: '01', content: '你好,中国'},
  {id: '02', content: '你好,尚硅谷'},
  {id: '03', content: '你好,未来的自己'},
]
class Detail extends Component {
  render() {
    console.log(this.props);
    //接收 params 参数
    const {id, title} = this.props.match.params
    const findResult = DetailData.find(detailObj => {
      return detailObj.id === id
    })
    return (
      <div>
        <ul>
          <li>ID:{id}</li>
          <li>TITLE:{title}</li>
          <li>CONTENT:{findResult.content} </li>
        </ul>
      </div>
    );
  }
}

search 参数

//Message .jsx
 /*向路由组件传 search 参数*/
<Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
 {/*search 参数无需声明接收,正常注册路由即可 */}
 <Route path='/home/message/detail' component={Detail}></Route>

//Detail.jsx
 import qs from 'querystring'
 const {search} = this.props.location
 const {id, title} = qs.parse(search.slice(1))
 const findResult = DetailData.find(detailObj => {
   return detailObj.id === id
 })

//Message .jsx
 {/*向路由组件传 state 参数*/}
<Link to={{
  pathname: '/home/message/detail',
  state: {id: msgObj.id, title: msgObj.title}
}}>{msgObj.title}</Link>

 {/*state 参数无需声明接收,正常注册路由即可 */}
  <Route path='/home/message/detail' component={Detail}></Route>

//Detail.jsx
//接收 state 参数
const {id, title} = this.props.location.state || {}
const findResult = DetailData.find(detailObj => {
  return detailObj.id === id
}) || {}

补充

//react内置库
import qs from 'querystring'

let obj = {name: 'TOM', age: 18}
console.log(qs.stringify(obj)); //name=TOM&age=18

let str = 'carName=奔驰&price=199'
console.log(qs.parse(str));   //{carName: '奔驰', price: '199'}

5.6 编程式路由导航

 replaceShow = (id, title) => {
    // replace 携带 params 参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)

    // replace 携带 search 参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

    // replace 携带 state 参数
    this.props.history.replace(`/home/message/detail`,{id, title})
  }
  pushShow = (id, title) => {
    // push 携带 params 参数
    // this.props.history.push(`/home/message/detail/${id}/${title}`)

    // push 携带 search 参数
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

    // push 携带 state 参数
    this.props.history.push(`/home/message/detail`,{id, title})

  }
  back=()=>{
    this.props.history.goBack()
  }
  foward=()=>{
    this.props.history.goForward()
  }
  go=()=>{
    this.props.history.go(-2)
  }

<button onClick={() => { this.pushShow(msgObj.id, msgObj.title)}}>push</button>
<button onClick={() => { this.replaceShow(msgObj.id, msgObj.title)}}>replace</button>
<button onClick={this.back}>后退</button>
<button onClick={this.foward}>前进</button>
<button onClick={this.go}>go</button>

借助this.prosp.history对象上的API对操作路由跳转、前进、后退
-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()

5.7 withRouter的使用

//withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
//withRouter的返回值是一个新组件
import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

class Header extends Component {
	back = ()=>{ this.props.history.goBack()}
	forward = ()=>{	this.props.history.goForward()}
	go = ()=>{ this.props.history.go(-2)	}
	
	render() {
		console.log('Header组件收到的props是',this.props);
		return (
			<div className="page-header">
				<h2>React Router Demo</h2>
				<button onClick={this.back}>回退</button>&nbsp;
				<button onClick={this.forward}>前进</button>&nbsp;
				<button onClick={this.go}>go</button>
			</div>
		)
	}
}
export default withRouter(Header)

BrowserRouter与HashRouter的区别

1.底层原理不一样：
					BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
					HashRouter使用的是URL的哈希值。
		2.path表现形式不一样
					BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
					HashRouter的路径包含#,例如：localhost:3000/#/demo/test
		3.刷新后对路由state参数的影响
					(1).BrowserRouter没有任何影响，因为state保存在history对象中。
					(2).HashRouter刷新后会导致路由state参数的丢失！！！
		4.备注：HashRouter可以用于解决一些路径错误相关的问题。

React UI组件库

6.1.流行的开源React UI组件库

material-ui(国外)
1.官网: http://www.material-ui.com/#/
2.github: https://github.com/callemall/material-ui

ant-design(国内蚂蚁金服)
1.官网: https://ant.design/index-cn
2.Github: https://github.com/ant-design/ant-design/

yarn add antd

import {Button} from 'antd'
import 'antd/dist/antd.css'
<Button type="primary">111</Button>

redux

7.1. redux理解

7.1.1. 学习文档
1.英文文档: https://redux.js.org/
2.中文文档: http://www.redux.org.cn/
3.Github: https://github.com/reactjs/redux

7.1.2. redux是什么
1.redux是一个专门用于做状态管理的JS库(不是react插件库)。
2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3.作用: 集中式管理react应用中多个组件共享的状态。

7.1.3. 什么情况下需要使用redux
1.某个组件的状态，需要让其他组件可以随时拿到（共享）。
2.一个组件需要改变另一个组件的状态（通信）。
3.总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

7.1.4. redux工作流程

7.2. redux的三个核心概念

7.2.1. action
动作的对象
包含2个属性

l type：标识属性, 值为字符串, 唯一, 必要属性
l data：数据属性, 值类型任意, 可选属性

例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

7.2.2. reducer
用于初始化状态、加工状态。
加工时，根据旧的state和action， 产生新的state的纯函数。

7.2.3. store
将state、action、reducer联系在一起的对象

如何得到此对象?

1) import {createStore} from 'redux'

2) import reducer from './reducers'

3) const store = createStore(reducer)

此对象的功能?

1. getState(): 得到state
2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

7.3. redux的核心API

7.3.1. createstore()
作用：创建包含指定reducer的store对象

7.3.2. store对象
1.作用: redux库最核心的管理对象
2.它内部维护着:
1)state
2)reducer
3.核心方法:
1)getState()
2)dispatch(action)
3)subscribe(listener)
4.具体编码:
1)store.getState()
2)store.dispatch({type:‘INCREMENT’, number})
3)store.subscribe(render)

7.3.3. applyMiddleware()
作用：应用上基于redux的中间件(插件库)

7.3.4. combineReducers()
作用：合并多个reducer函数

7.4 使用redux编写应用

1.求和案例_redux精简版

	(1).去除Count组件自身的状态
	(2).src下建立:
					-redux
						-store.js
						-count_reducer.js

	(3).store.js：
				1).引入redux中的createStore函数，创建一个store
				2).createStore调用时要传入一个为其服务的reducer
				3).记得暴露store对象

	(4).count_reducer.js：
				1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态
				2).reducer有两个作用：初始化状态，加工状态
				3).reducer被第一次调用时，是store自动触发的，
								传递的preState是undefined,
								传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

	(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
			备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

//安装redux
yarn add redux

//store.js
/* 	
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

//count_reducer.js
/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case 'increment': //如果是加
			return preState + data
		case 'decrement': //若果是减
			return preState - data
		default:
			return preState
	}
}

//count.js
//引入store，用于获取redux中保存状态
import store from '../../redux/store'

componentDidMount() {
 //store改了数据但不会更新视图，需通过 setState调用render更新
    store.subscribe(()=>{ 
      this.setState({}) 
    })
}
  
//奇数加
  incrementIfOdd = () => {
    const {value} = this.selectNumber
    const count = store.getState()
    if (count % 2 !== 0) {
      store.dispatch({type: 'increment', data: value * 1})
    }
  }

/*  使用自身 state 时
 //奇数加
  incrementIfOdd = () => {
    const {value} = this.selectNumber
    const {count} = this.state
    if (count % 2 !== 0) {
      this.setState({count: count + value * 1})
    }
  }
  */

2.求和案例_redux完整版

	新增文件：
		1.count_action.js 专门用于创建action对象
		2.constant.js 放置容易写错的type值

//constant.js
/*该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

//count_action.js
/*该文件专门为Count组件生成action对象*/
import {INCREMENT, DECREMENT} from './constant'
export const createIncrementAction = data => ({type: INCREMENT, data})
export const createDecrementAction = data => ({type: DECREMENT, data})

//count_reducer.js
/*  1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)*/
import {INCREMENT, DECREMENT} from './constant'
const initState = 0 //初始化状态
export default function countReducer(preState = initState, action) {
  //从action对象中获取：type、data
  const {type, data} = action
  //根据type决定如何加工数据
  switch (type) {
    case INCREMENT:
      return preState + data //如果是加
    case DECREMENT:
      return preState - data //若果是减
    default:
      return preState
  }
}

//count.jsx
import store from '../../redux/store'
import {createIncrementAction, createDecrementAction} from '../../redux/count_action'

store.dispatch(createIncrementAction(value * 1))

3.求和案例_redux异步action版

	 (1).明确：延迟的动作不想交给组件自身，想交给action
	 (2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
	 (3).具体编码：
	 			1).yarn add redux-thunk，并配置在store中
	 			2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
	 			3).异步任务有结果后，分发一个同步的action去真正操作数据。
	 (4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

//store.js
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
export default createStore(countReducer,applyMiddleware(thunk))

//count_action.js
//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type: INCREMENT, data})

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data, time) => {
  return (dispatch) => {
    setTimeout(() => {dispatch(createIncrementAction(data))}, time)
  }
}

//count.jsx
 store.dispatch(createIncrementAsyncAction(value * 1, 500))

7.6 react-redux

4.求和案例_react-redux基本使用

		(1).明确两个概念：
					1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
					2).容器组件：负责和redux通信，将结果交给UI组件。
		(2).如何创建一个容器组件————靠react-redux 的 connect函数
						connect(mapStateToProps,mapDispatchToProps)(UI组件)
							-mapStateToProps:映射状态，返回值是一个对象
							-mapDispatchToProps:映射操作状态的方法，返回值是一个对象
		(3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
		(4).备注2：mapDispatchToProps，也可以是一个对象

//containers/Count/index.jsx (容器组件)
//引入Count 的 UI组件
import CountUI from '../../components/Count'
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'
//引入connect 用于连接 ui组件与 redux
import {connect} from 'react-redux'

/*
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递 状态
*/
function mapStateToProps(state) {
  return {count: state}
}

/*
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递 操作状态的方法
*/
function mapDispatchToProps(dispatch) {
  return {
    //  通知 redux 执行加法
    jia: number => dispatch(createIncrementAction(number)),
    jian: number => dispatch(createDecrementAction(number)),
    jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time)),
  }
}

//使用 connect()()创建并暴露一个Count容器的组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

//App.jsx
import Count from './containers/Count'
//给容器组件传递 store 
<Count store={store}></Count>

//components/Count/index.jsx (UI组件)
//加
this.props.jia(value * 1)
//异步加
 this.props.jiaAsync(value * 1, 500)

5.求和案例_react-redux优化

		(1).容器组件和UI组件整合一个文件
		(2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。
		(3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
		(4).mapDispatchToProps也可以简单的写成一个对象
		(5).一个组件要和redux“打交道”要经过哪几步？
						(1).定义好UI组件---不暴露
						(2).引入connect生成一个容器组件，并暴露，写法如下：
								connect(
									state => ({key:value}), //映射状态
									{key:xxxxxAction} //映射操作状态的方法
								)(UI组件)
						(4).在UI组件中通过this.props.xxxxxxx读取和操作状态

//containers/Count/index.jsx (容器组件)
//使用 connect()()创建并暴露一个Count容器的组件
export default connect(
  state => ({count: state}),
  {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction,
  }
  /*dispatch => ({
    jia: number => dispatch(createIncrementAction(number)),
    jian: number => dispatch(createDecrementAction(number)),
    jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time)),
  })*/
)(CountUI)

/*App.jsx不需要再一个个在  
import store from './redux/store'
<Count store={store}></Count> 了  */

//直接在 index.js
import store from './redux/store'
import {Provider} from 'react-redux'
<Provider store={store}>
    <App />
 </Provider>

小白写法

//containers/index.jsx
import React, {Component} from 'react';
import {connect} from "react-redux";
import {createIncrementAction} from '../../redux/count_action'

class Count extends Component {
  add = () => {
    this.props.add(1)
  }

  render() {
    return (
      <div>
        <h2>和为：{this.props.he}</h2>
        <button onClick={this.add}>点我+1</button>
      </div>
    );
  }
}

export default connect(
  state => ({he: state}),
  {add: createIncrementAction}
)(Count)

6.求和案例_react-redux数据共享版

		(1).定义一个Pserson组件，和Count组件通过redux共享数据。
		(2).为Person组件编写：reducer、action，配置constant常量。
		(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，
				合并后的总状态是一个对象！！！
		(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

7.8.求和案例_react-redux最终版
(1).所有变量名字要规范，尽量触发对象的简写形式。
(2).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer

7.7 求和案例_react-redux开发者工具的使用

7.7.1. 安装chrome浏览器插件

		(1).yarn add redux-devtools-extension
		(2).store中进行配置
				import {composeWithDevTools} from 'redux-devtools-extension'
				const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

7.8. 纯函数和高阶函数

7.8.1. 纯函数
一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)

• 必须遵守以下一些约束 不得改写参数数据
• 不会产生任何副作用，例如网络请求，输入和输出设备
• 不能调用Date.now()或者Math.random()等不纯的方法
  redux的reducer函数必须是一个纯函数

7.8.2. 高阶函数
理解: 一类特别的函数
情况1: 参数是函数
情况2: 返回是函数

常见的高阶函数:

• 定时器设置函数
• 数组的forEach()/map()/filter()/reduce()/find()/bind()
• promise
• react-redux中的connect函数

作用: 能实现更加动态, 更加可扩展的功能

项目打包运行

ctrl + C 停掉项目
npm run build
npm i serve -g
serve build

补充

1. setState更新状态的2种写法

(1). setState(stateChange, [callback])------对象式的setState
        1.stateChange为状态改变对象(该对象可以体现出状态的更改)
        2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
				
(2). setState(updater, [callback])------函数式的setState
        1.updater为返回stateChange对象的函数。
        2.updater可以接收到state和props。
        4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
 
总结:
	1.对象式的setState是函数式的setState的简写方式(语法糖)
	2.使用原则：
			(1).如果新状态不依赖于原状态 ===> 使用对象方式
			(2).如果新状态依赖于原状态 ===> 使用函数方式
			(3).如果需要在setState()执行后获取最新的状态数据, 
				要在第二个callback函数中读取

	state = {count:0}

	add = ()=>{
		//对象式的setState
		 //1.获取原来的count值
		const {count} = this.state
		//2.更新状态
		this.setState({count:count+1},()=>{
			console.log(this.state.count);
		})
	 //console.log('12行的输出',this.state.count); //0 
     //this.setState({count:this.state.count+1})
     
		//函数式的setState
		this.setState( state => ({count:state.count+1}))
	}

2. 路由组件的lazyLoad

//index.jsx
import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'

import Loading from './Loading'
//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))
//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
	<Suspense fallback={<Loading/>}>
        <Switch>
            <Route path="/xxx" component={Xxxx}/>
            <Redirect to="/login"/>
        </Switch>
    </Suspense>


//loading.jsx
import React, { Component } from 'react'
export default class Loading extends Component {
	render() {
		return (
			<div>
				<h1 style={{backgroundColor:'gray',color:'orange'}}>Loading....</h1>
			</div>
		)
	}
}

3. Hooks

React Hook/Hooks是什么
(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

三个常用的Hook
(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()

State Hook
(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM
(3). 语法和说明:
useEffect(() => {
// 在此可以执行任何带副作用操作
return () => { // 在组件卸载前执行
// 在此做一些收尾工作, 比如清除定时器/取消订阅等
}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

(4). 可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount()

Ref Hook
(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样

4. Fragment

作用:可以不用必须有一个真实的DOM根标签了

<Fragment key={1}><Fragment>  //可以有key属性，遍历时有用
<></>                         //不可以有key属性

5. Context

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

1) 创建Context容器对象：
const XxxContext = React.createContext()  

2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
<xxxContext.Provider value={数据}>
	子组件
</xxxContext.Provider>

3) 后代组件读取数据：
  //第一种方式:仅适用于类组件 
  static contextType = xxxContext  // 声明接收context
  this.context // 读取context中的value数据	  
  
  //第二种方式: 函数组件与类组件都可以
  <xxxContext.Consumer>
    {
      value => ( // value就是context中的value数据
        要显示的内容
      )
    }
  </xxxContext.Consumer>

import React, { Component } from 'react'
//创建Context对象
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext
export default class A extends Component {

	state = {username:'tom',age:18}

	render() {
		const {username,age} = this.state
		return (
			<div className="parent">
				<h3>我是A组件</h3>
				<h4>我的用户名是:{username}</h4>
				<Provider value={{username,age}}>
					<B/>
				</Provider>
			</div>
		)
	}
}

class B extends Component {
	render() {
		return (
			<div className="child">
				<h3>我是B组件</h3>
				<C/>
			</div>
		)
	}
}

/* class C extends Component {
	//声明接收context
	static contextType = MyContext
	render() {
		const {username,age} = this.context
		return (
			<div className="grand">
				<h3>我是C组件</h3>
				<h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
			</div>
		)
	}
} */

function C(){
	return (
		<div className="grand">
			<h3>我是C组件</h3>
			<h4>我从A组件接收到的用户名:
			<Consumer>
				{value => `${value.username},年龄是${value.age}`}
			</Consumer>
			</h4>
		</div>
	)
}

6. 组件优化

Component的2个问题

1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低

2. 只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1: 
	重写shouldComponentUpdate()方法
	比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:  
	使用PureComponent
	PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
	注意: 
		只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
		不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

7. render props

如何向组件内部动态传入带内容的结构(标签)?

Vue中: 
	使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
	使用children props: 通过组件标签体传入结构
	使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到 

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data} 

import React, {Component} from 'react';

class Parent extends Component {
  render() {
    return (
      <div>
        <h3>我是父</h3>
        {/*<A> <B/> </A>*/}       //法2. children props
        <A render={(name) => <B name={name}/>}/>  //法3. render props
      </div>
    );
  }
}


class A extends Component {
  state = {name: 'tom'}

  render() {
    return (
      <div>
        <h3>我是A</h3>
        {/*<B name={this.state.name}></B>*/}  //法1. 直接引用子组件
        {/*{this.props.children}*/}          //法2. children props
        {this.props.render(this.state.name)}  //法3. render props
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div>
        <h3>我是B,{this.props.name}</h3>
      </div>
    );
  }
}

export default Parent;

8. 错误边界

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式：

getDerivedStateFromError配合componentDidCatch

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

9. 组件通信方式总结

组件间的关系：

• 父子组件
• 兄弟组件（非嵌套组件）
• 祖孙组件（跨级组件）

几种通信方式：

	1.props：
		(1).children props
		(2).render props
	2.消息订阅-发布：
		pubs-sub、event等等
	3.集中式管理：
		redux、dva等等
	4.conText:
		生产者-消费者模式

比较好的搭配方式：

	父子组件：props
	兄弟组件：消息订阅-发布、集中式管理
	祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

Router6

import {NavLink, Routes, Route,Navigate} from "react-router-dom";
  
 <NavLink className="list-group-item " to="about">About</NavLink>
 <NavLink className="list-group-item " to="home">Home</NavLink>

<Routes>
        <Route path='/about' element={<About/>}></Route>
        <Route path='/home' element={<Home/>}></Route>
        <Route path='/' element={<Navigate to="/about"/>}></Route>
</Routes>
         

<NavLink className={({isActive}) => isActive ? 'list-group-item atguigu' : 'list-group-item'} to="/about">About</NavLink>
<NavLink className={({isActive}) => isActive ? 'list-group-item atguigu' : 'list-group-item'} to="/home">Home</NavLink>

//或者
function compoutedClassName({isActive}) {
    return isActive ? 'list-group-item atguigu' : 'list-group-item'
}
<NavLink className={compoutedClassName} to="/about">About</NavLink>
<NavLink className={compoutedClassName} to="/home">Home</NavLink>

路由表

//routes/index.js
import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import React from "react";

export default [
  {
    path: '/about',
    element: <About/>
  },
  {
    path: '/home',
    element: <Home/>
  },
  {
    path: '/',
    element: <Navigate to='/about'/>
  },
]

//App.jsx
import {NavLink,useRoutes} from "react-router-dom";
const element = useRoutes(routes)

{element}

嵌套路由

// home/index.jsx
import {NavLink, Outlet} from "react-router-dom";

<div>
          <ul className="nav nav-tabs">
            <li>
              {/*<NavLink className="list-group-item" to='/home/news'>News</NavLink>*/}
              <NavLink className="list-group-item" to='news'>News</NavLink>
            </li>
            <li>
              <NavLink className="list-group-item " to="message">Message</NavLink>
            </li>
          </ul>
          {/*指定路由组件呈现的位置，类似于vue的 router-view */}
          <Outlet/>
 </div>

//router/index.js
import About from "../pages/About";
import Home from "../pages/Home";
import Message from '../pages/Message'
import News from '../pages/News'
import {Navigate} from "react-router-dom";
import React from "react";

export default [
  {
    path: '/about',
    element: <About/>
  },
  {
    path: '/home',
    element: <Home/>,
    children: [
      {
        path: 'news',
        element: <News/>,
      },
      {
        path: 'message',
        element: <Message/>,
      }
    ]
  },
  {
    path: '/',
    element: <Navigate to='/about'/>
  },
]

路由传参

// router/index.js
 {
        path: 'message',
        element: <Message/>,
        children: [
          {
           // path: 'detail/:id/:title/:content',  //params传参
             path: 'detail',                 //search传参,state传参
            element: <Detail/> 
          }
        ]
 }

//Message/index.jsx
import React, {useState} from 'react';
import {Link,Outlet} from 'react-router-dom'
function Message(props) {
  const [messages] = useState([
    {id: '001', title: '消息1', content: '锄禾日当午'},
    {id: '002', title: '消息2', content: '汗滴禾下土'},
    {id: '003', title: '消息3', content: '谁知盘中餐'},
    {id: '004', title: '消息4', content: '粒粒皆辛苦'},
  ])
  return (
    <div>
      <ul>
        {
          messages.map((m) => {
            return (
              <li key={m.id}>
              //  <Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>    //params传参
                  <Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link> //search传参
                  /* <Link to="detail" state={{
                     id: m.id,
                     title: m.title,
                     content: m.content
                  }}>{m.title}</Link>   */       //state传参
              </li>
            )
          })
        }
      </ul>
      <hr/>
      <Outlet></Outlet>
    </div>
  );
}
export default Message;

//Detail/index.jsx
import React from 'react';
//import {useParams} from "react-router-dom";  //params传参
import {useSearchParams} from "react-router-dom"; //search传参
//import {useLocation} from 'react-router-dom'   //state传参

function Detail(props) {
//  const {id,title,content} = useParams()   //params传参

 const [search, setSearch] = useSearchParams()  //search传参
  const id = search.get('id');            //search传参
  const title = search.get('title');          //search传参
  const content = search.get('content');   //search传参
  
// const {state:{id,title,content}} = useLocation()  //state传参
  return (
    <div>
     <button onClick={() => {setSearch('id=008&title=哈哈&content=嘻嘻')}}>点我更新收到的search参数
      <ul>
        <li>{id}</li>
        <li>{title}</li>
        <li>{content}</li>
      </ul>
    </div>
  );
}
export default Detail;

编程式导航

//Message/index.jsx
import {useNavigate} from 'react-router-dom'

const navigate = useNavigate()
function showDetail(m) {
    navigate('detail',{
      replace:false,
      state:{
        id:m.id,
        title:m.title,
        content:m.content,
      }
    })
  }
 <button onClick={()=>{showDetail(m)}}>点我查看详情</button>

//Header/index.jsx
import {useNavigate} from "react-router-dom";
const navigate = useNavigate()
function back() {  navigate(-1) }
function forward() {  navigate(1) }
<button onClick={back}> 后退</button>
<button onClick={forward}> 前进</button>