react 路由基础配置解释 模板 精简

博客介绍了React路由的相关内容,包括路由的基本用法、子路由、重定义项,还阐述了React路由执行顺序的实现。此外,提到通过打印this.props可获取方法,能打印出路径和传参,以及跳转路由的push()、replace()方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

路由的基本用法

    // 下载第三方包 react-router-dom
    import {BrowserRouter,Route,Redirect,Link,NavLink} from 'react-router-dom';
    //在组件当中
    class Index extends Component{
        render(){
            return <BrowserRouter>
                    <Route path={}  component={} exact/>
                </BrowserRouter>
        }
    }
    //path  用于指定路径名
    //component  渲染视图  里面可以是方法
    //render  渲染视图  速度比较快 不会重新去创建元素
    //children 与render类似  区别是 无论路径是否匹配都会渲染,适合用于转场动画
    //exact       精确匹配但是不会验证尾线
    //strict      会严格验证尾线

子路由

import {BrowserRouter,Route,Redirect,Link,NavLink,Redirect} from 'react-router-dom';
//Redirect 用于 重定义项
//Link 、NavLink   都是 <a />标签   区别是  后者带有class名
  class Index extends Component{
        render(){
            return <BrowserRouter>
                    <Route path={}  component={this.listRoute}/>
                </BrowserRouter>
        }
        listRoute = () => {//子路由
             <Route path={路径}  component={视图} exact/>
        }
    }

重定义项

import {BrowserRouter,Route,Redirect,Link,NavLink,Redirect} from 'react-router-dom';
//Redirect 用于 重定义项
//Link 、NavLink   都是 <a />标签   区别是  后者带有class名
  class Index extends Component{
        render(){
            return <BrowserRouter>
                    <Route path={'/'}  render={()=><Redirect to={'/index'} />}  exact/>  //路径是 '/' 时自动到 '/index'
                    <Route path={'/index'}  component={Index}/>
                </BrowserRouter>
        }
       
    }

react路由执行的顺序 实现

//      <Route path={}  component={} exact/>
    class Route extends Component{
        render(){
            let {path,component}=this.props;
            return window.location.pathname===path && <component />
        }
    }
  • 打印this.props 可以打印出方法
  • 路径 传参 都可以打印出来
  • 跳转路由–> push()、replace()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值