• React路由简单介绍


    1.1、基本用法

    单页面得特点:只需要加载一次主页面,通过局部刷新,就可以实现跳转或者切换页面

    优点:加载速度快,用户体验比较好

    缺点:

    - 第一次加载比传统要慢一点
    - 不利seo
    - 页面相对复杂
    - 返回键

    1.2安装react-router-dom

    cnpm install react-router-dom  

    下载到生产环境的依赖中。

    在组件中通过对象的解构方式去获取到`react-router-dom`内置组件,在组件中,按需引入内置组件,在页面中进行使用:

    - HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
    - Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
    - Link表示一个路由的链接

    代码示例

    render(){
            return (
                <HashRouter>
                    <div>
                        <h1>这是网站的根目录</h1>
                        <hr />
                        <Link to="/home">首页</Link>  
                        <Link to="/movie/">电影</Link>  
                        <Link to="/about">关于</Link>
                        <hr />
                        <Route path="/home" component={Home} ></Route><hr/>
                        <Route path="/movie" component={Movie} exact></Route><hr/>
                        <Route path="/about" component={About}></Route><hr/>
                    </div>
                </HashRouter>
            );
        }
    

    当使用HashRouter把APP根组件的元素包裹起来之后,网站就已经启用路由了,在一个HashRouter中,只能有唯一的一个根元素。 在一个网站中,只需要使用唯一的一次`<HashRouter></HashRouter>`就行了。

    Route创建的标签,就是路由规则,其中path表示要匹配的路由,component表示要展示的组件。Route具有两种身份:1.它是一个路由匹配规则;2.它是一个占位符,表示将来匹配到的组件都放到这个位置

    需要注意的地方

    - Route 组件path地址是以/开头 ,配置component属性,是显示的组件,这个属性不可以大写
    - Route组件可以单双标签使用,单标签需要/结尾,双标签不可以在中间写入别的东西
    - Link to属性的地址也是/开头,Link在页面渲染的是a标签

    2.1、路由传值

    通过配置路由的地址,在Link跳转时

    - Route path路径后面 /:id (key)
    - Link to 路径后面 /top/10 (value)

    接收传值:

    - class类组件,this.props.match.params.属性名
    - 函数组件:形参.match.params.属性名

    代码示例

    render(){
            return (
                <HashRouter>
                    <div>
                        <h1>这是网站的根目录</h1>
                        <hr />
                        <Link to="/movie/top/10">电影</Link>  
                        <hr />
                        <Route path="/movie/:type/:id" component={Movie} exact></Route>
                    </div>
                </HashRouter>
            );
        }
    

    在Route内置组件中,配置path地址:

    <Route path="/movie/:type/:id" component={Movie} exact></Route>
    

    在Link内置组件中,配置to属性,进行跳转:

    <Link to="/movie/top/10">电影</Link>
    

    类组件中通过生命周期进行接收,this.props携带路由传递过来的数据:

    render(){
            console.log(this);
            return (
                <div>
                    电影--{this.props.match.params.type}--{this.props.match.params.id}
                </div>
            );
        }
    

    代码优化后: 

    class Movie extends React.Component{
    
        constructor(props){
            super();
            this.state = {
                routeParams:props.match.params
            }
        }
    
        render(){
            console.log(this);
            return (
                <div>
                    电影--{this.state.routeParams.type}--{this.state.routeParams.id}
                </div>
            );
        }
    }
    

    函数组件中通过形参接收传递过来的值,props形参,函数组件作为路由组件,props就是传递过来的对象,里面携带着路由传递过来的数据 

    import React from 'react'
    
    export default function home(props) {
    	return (
    		<div>
    			{props.match.params.id}
    		</div>
    	)
    }
    

    2.2、嵌套路由 

    嵌套路由:在路由组件中,使用Link, Route,配置子路由,实现跳转,切换;

    下面为一级路由,在一级路由Home为路由组件

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

    在Home组件中继续使用Link,Route进行路由的嵌套,需要注意的就是路由地址,前部分为一级路由地址,后面接一个二级路由相应的路径 

    render() {
        return (
            <div>
                <ul>
                	<li><Link to="/home/a">推荐</Link></li>
                	<li><Link to="/home/b">新时代</Link></li>
                    <li><Link to="/home/c">动漫</Link></li>
                </ul>
                <Route path="/home/a" component={ A }></Route>
                <Route path="/home/b" component={ B }></Route>
                <Route path="/home/c" component={ C }></Route>
            </div>
        )
    }
    

    2.3、JS实现路由跳转 

    引入BrowserRouter模块

    import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'
    

    使用BrowserRouter作为根容器 

    jump(){
        window.location.href = "/news"
    }
    
    render(){
        return (
            <BrowserRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <button onClick={()=>{this.jump()}}>新闻</button>
                    <hr />
                    <Route path="/news" component={News}></Route>
                </div>
            </BrowserRouter>
        );
    }
    

    在render方法中,写一个按钮,按钮名称为js跳转路由,定义一个onClick方法,箭头函数解决this指向问题,与render同级,定义一个jump方法,在jump方法中执行一句代码进行路由跳转,使用window.location.href = “路由的地址”实现路由跳转。 

    3、react-router-dom内置组件

    首先按需引入,使用什么内置组件,就需要引入

    import { BrowserRouter, Link, Route,Redirect,NavLink,Switch } from 'react-router-dom'
    

    3.1、在组件中使用NavLink 

    NavLink 带有选中activeClassName ,如果路由处于激活状态,显示激活class样式。

    在我们之前案例的基础上,找到Link组件,我们已经学到Link组件的作用,可以进行路由的跳转,通过to属性,跳转相应的path地址。

    ```html//
    <ul>
        <li>
        	<Link to="/home">首页</Link>
        </li>
        <li>
        	<Link to="/video">好看视频</Link>
        </li>
    </ul>
    

     将组件中的Link全部换成NavLink组件

    ``html//
    <li>
    	<NavLink activeClassName="red" to="/home">首页</NavLink>
    </li>
    <li>
    	<NavLink activeClassName="red" to="/video">好看视频</NavLink>
    </li>
    ```
    

      

    我们会发现,之前可以正常进行路由跳转,换成NavLink,还依然可以正常跳转,证明组件得跳转使用NavLink也可以实现,那么问题来了,NavLink有什么用,为什么封装了NavLink,将每一个NavLink加入一个activeClassName属性绑定一个class类样式,这时在触发NavLink时,会触发相应得样式,这样有一个切换效果。

    3.2、在组件中使用Redirect内置组件

    Redirect 重定向 具备to属性,可以直接跳转到指定路由。

    在render方法中,使用内置组件,Redirect内置组件使用to属性,当执行到内置标签是,会进行to跳转路由,to后面接的地址是什么,就可以匹配到相应得路由组件。

    ```html//
    <Redirect to="/home/c"></Redirect>
    

    3.3、在组件使用Switch内置组件 

    Switch 具有排他性

    在组件中使用Switch标签包裹所有得Route,这时,Route相当于每一个path都是精准的匹配,展示相应的组件,最后一个Route是一个不具备地址的路由路径,如果当Link指向一个不存在的地址时,没有精准的匹配到地址,那么会显示到C404路由,使用Switch只会显示一个组件,匹配到为止。

    ``html//
    <Switch>
        <Route path="/home" component={ Home }></Route>
        <Route path="/video" component={ Home1 }></Route>
        <Route path="/book" component={ Home2 }></Route>
        <Route path="/renwu" component={ Home3 }></Route>
        <Route path="/user" component={ Home4 }></Route>
        <Route component={ C404 }></Route>
    </Switch>
    ```
    

      

     

     

  • 相关阅读:
    Ubuntu20.04安装Docker
    开启企业微信H5页面调试功能
    Python实现图遍历
    Linux命令整理
    BDP数据分析之高级计算
    PowerBI之DAX
    Dundas BI 简介
    tableau的高级计算
    k8s集群创建之后coredns一直处于pending状态
    Gradle打包工具入门
  • 原文地址:https://www.cnblogs.com/zouhuixiang/p/12096701.html
Copyright © 2020-2023  润新知