zoukankan      html  css  js  c++  java
  • React-router的注意事项

    React-router的注意事项

    1.入口文件index.js引入React-router

    import {BrowserRouter as Router} from 'react-router-dom'  
    
    ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
    

    注意:1.路由有两种模式 HashRouter:url中有#

    ​ BrowserRouter:需要和后端配合

    ​ 2.{BrowserRouter as Router} 将路由取名为Router

    ​ 3.组件形式让router作用全局


    2.路由的使用

    import {Route} from 'react-router-dom'
    
    <Route path = "/home" component = { Home } ></Route>
    

    1.错误路由设置

    <Route component = {Error} ></Route>
    

    2.重定向路由设置

    import { Redirect} from 'react-router-dom'
    
    <Redirect from = '/' to='/home' exact ></Redirect>
    

    3.路径完全匹配

    重定向用一下就好了

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

    4.switch一次只加载一个路由

    import {Switch} from 'react-router-dom'
    
    <Switch>
                  <Redirect from = '/' to='/home' exact></Redirect>
                  <Route path = "/home" component = { Home }   ></Route>
                  <Route path = "/category" component = {Category} ></Route>
                  <Route path = "/mine" component = {Mine} ></Route>
                  <Route path = "/list" component = {List} ></Route>
                  <Route path = "/detail" component = {Detail} ></Route>
                  <Route path = "/recommend" component = {Recommend} ></Route>
                  <Route path = "/shopCar" component = {ShopCar} ></Route>
                  <Route component = {Error} ></Route>
    </Switch>
    

    5.render可以定义一个路由模块

     <Route path = "/detail/001" render = {()=><div>detail001</div>}></Route>
    

    3.路由激活

    import {NavLink} from 'react-router-dom'
    
    <NavLink activeClassName = 'active' to ={props.path}>
    

    如果无需激活直接

    import {Link} from 'react-router-dom'
    

    4.render 和 children的区别

     <Route path = '/mine/login' render = {()=><div>Login</div>}></Route>	//不会直接显示
         
     <Route path = '/mine/login' children = {()=><div>Login</div>}></Route>	//children 会直接显示
    
     <Link to = {{
                  pathname: '/list/002',
                  search: '?id=001&type=yifu',
                  state: {
                    num: 100,
                    price: 200
                  }
                }}> list- 衣服 </Link>
    

    6.动态路由

     <Route path = "/list/:id" component = { List }  exact></Route>
    

    7.编程式导航

    /* 
        编程式导航: push   replace  go  goback
      */
    
      goRecomend = () => {
        this.props.history.push('/recommend')
      }
    
      goLogin = () => {
        this.props.history.replace({
          pathname: '/mine/login'
        })
      }
    
      render () {
        return (
          <HomeContainer>
            home
            <hr/>
            {/* 首页跳转推荐页面 */}
            <button onClick = { this.goRecomend }> 跳转推荐 </button>
            {/* 首页跳转登录页面 */}
            <button onClick = { this.goLogin }> 跳转登录 </button>
          </HomeContainer>
        )
      }
    }
    

    8.路由监听

    监听整个项目,我们要在最大的根组件中监听App组件

    app不是路由组件 没有绑定3个属性(history,location,match)

    所以需要通过高阶组件withRouter将app转换成路由组件

    import { withRouter } from 'react-router-dom'
    
    export default withRouter(App) ;
    
  • 相关阅读:
    解决 .net Core 3.1中使用GB2312编码异常
    sql server datetime类型字段使用isnull返回1900-01-01 00:00:00.000的问题
    c# – 从.NET中的字符串获取url参数
    fastjson对象,JSON,字符串,map之间的互转
    Java工具:Java递归去除Json字符串空值(key和value)
    vue运行报错 ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    java调用CTP API坑【我】
    SpringBoot在logback.xml中读取application.properties中配置的日志路径
    org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com【我】
    springboot mybatis-plus分页配置不生效【我】
  • 原文地址:https://www.cnblogs.com/xiaohanga/p/11197015.html
Copyright © 2011-2022 走看看