React 路由详细版学习教程

49 篇文章 0 订阅
4 篇文章 0 订阅
  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. BrowserRouterHashRouter的区别

          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博客

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值