React 路由详细版学习教程

1. React路由：使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由，路由就是路径与组件之间的映射关系。

   // 简单路由
   import React, { Component } from 'react'
   import {NavLink} from 'react-router-dom'
   
   export default class MyNavLink extends Component {
   	render() {
   		return (
   			<NavLink className="list-group-item" {...this.props}/>
   		)
   	}
   }
   

2. 路由安装与引入

   1. 使用npm安装：npm i react-router-dom react-router -g 

   2. 引入路由中的需求组件：

      1.   import {NavLink} from 'react-router-dom' 

      2. import {Switch, Route, Router} from 'react-router';
         

   3. 组件中直接使用：<NavLink className="list-group-item" {...this.props}/>

3. 区分react-router、react-router-dom、react-router-native

   1. react-router: 实现了路由的核心功能

   2. react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，​​​​L​​​ink组件源码a标签行；

   3. react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。

   4. 结论：

      1. react-router-dom依赖react-router，所以我们使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router；
      2. 基于浏览器环境的开发，只需要安装react-router-dom；
      3. 基于react-native环境的开发，只需要安装react-router-native

4. 路由的基本使用  

       1.明确好界面中的导航区、展示区

       2.导航区的a标签改为Link标签

             <Link to="/xxxxx">Demo</Link>

       3.展示区写Route标签进行路径的匹配

            <Route path='/xxxx' component={Demo}/>

       4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

   <div className="test-router">
   	<div className="list-group">
   	     // 在React中靠路由链接实现切换组件--编写路由链接 
   		<MyNavLink to="/about">About</MyNavLink>
   		<MyNavLink to="/home">Home</MyNavLink>
   	</div>
   </div>
   <div className="test-router">
   	<div className="panel">
   		<div className="panel-body">
   			{/* 注册路由 */}
   			<Route path="/about" component={About}/>
   			<Route path="/home" component={Home}/>
   		</div>
   	</div>
   </div>

5. 路由组件与一般组件

         1.写法不同：

               一般组件：<Demo/>

               路由组件：<Route path="/demo" component={Demo}/>

         2.存放文件位置不同：

               一般组件：components

               路由组件：pages

         3.接收到的props不同：

               一般组件：写组件标签时传递了什么，就能收到什么

               路由组件：接收到三个固定的属性

                         history:

                               go: ƒ go(n)    // 加载 history 列表中的某个具体页面

                               goBack: ƒ goBack()    //  加载 history 列表中的前一个 URL

                               goForward: ƒ goForward()   // 加载 history 列表中的下一个 URL

                               push: ƒ push(path, state)    //  添加路由 跳转到这个路由（栈）

                               replace: ƒ replace(path, state)    //  替换路由

                         location:

                               pathname: "/about"     //  返回的URL路径名。

                               search: ""     //  返回一个URL的查询部分

                               state: undefined

                         match:

                               params: {}     //  

                               path: "/about"    //   返回一个URL路径

                               url: "/about"

6. React中NavLink组件和Switch组件

   1. NavLink：NavLink可以实现路由链接的高亮，可以使用NavLink替代Link。<NavLink>标签会自带activeClassName属性，给属性命名后直接添加样式即可

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

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

   1. 严格匹配: exact={true} ,

   2. 模糊匹配: exact={false},默认使用的是模糊匹配（【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

   3. 注意：严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

8. Redirect的使用

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

         2.具体编码：

              <Switch>

                 <Route path="/about" component={About}/>

                 <Route path="/home" component={Home}/>

                 <Redirect to="/about"/>

             </Switch>

9. 路由组件传递参数

     1.params参数

           路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>

           注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>

            接收参数：this.props.match.params

   render() {
   	const {msgObj} = this.state
   	return (
   		<div>
   			<li>
   				{/* 向路由组件传递params参数 */}
   				<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>跳转</Link>
   			</li>
   			{/* 声明接收params参数 */}
   			<Route path="/home/message/detail/:id/:title" component={Detail}/>
   		</div>
   	)
   }

     2.search参数

            路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>

            注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

            接收参数：this.props.location.search

             备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

   render() {
   	const {msgObj} = this.state
   	return (
   		<div>
   			<Link to={`/home/detail/?id=${msgObj.id}&title=${msgObj.title}`}>跳</Link>			            
                {/* search参数无需声明接收，正常注册路由即可 */}
   			<Route path="/home/detail" component={Detail}/>
   		</div>
   	)
   }

   render() {
   	console.log(this.props);
   
   	// 接收params参数
   	// const {id,title} = this.props.match.params 
   
   	// 接收search参数
   	const {search} = this.props.location
   	const {id,title} = qs.parse(search.slice(1))
   
   	const findResult = DetailData.find((detailObj)=>{
   		return detailObj.id === id
   	})
   	return (
   		<ul>
   			<li>ID:{id}</li>
   			<li>TITLE:{title}</li>
   			<li>CONTENT:{findResult.content}</li>
   		</ul>
   	)
   }

     3.state参数

           路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>

           注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

           接收参数：this.props.location.state

           注意：刷新也可以保留住参数

10. 路由嵌套

       1.注册子路由时要写上父路由的path值

       2.路由的匹配是按照注册路由的顺序进行的

11. 编程式路由导航（BrowserRouter）

       借助this.prosp.history对象上的API对操作路由跳转、前进、后退

             -this.prosp.history.push()    // 遵行堆栈中的先进先出的原则

             -this.prosp.history.replace()

             -this.prosp.history.goBack()

             -this.prosp.history.goForward()

             -this.prosp.history.go()

12. 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可以用于解决一些路径错误相关的问题。

13. 暂无路由更新...

                                                     

 about learn：React 学习_韦金-CSDN博客

 about learn：React中 配置代理的方法_韦金-CSDN博客