react路由

一：路由俩种模式
1：BrowserRouter：( 会出先404url不存在，在html可以跳是伪url,解决： historyApiFallback:ture 强制页面访问index.html)
2:HasHRouter:只存在客户端,存在服务端会被忽略（使用查询字符串search）

基本用法

main组件：

import React from 'react'
import ReactDom from 'react-dom'
import Router from "./router/index"
ReactDom.render(,document.getElementById("root"))

Router/Index组件：

import React from "react"
import {
  // HashRouter as Router
  BrowserRouter as Router,
  Route,
  Switch,(Switch：只渲染出第一个与当前访问地址匹配的  或 )
  Link，
  NavLink   //与link用法一样，区别是可以添加高亮，在样式中定义.active即可
} from "react-router-dom"
const bg=()=>{
    return 

     
hello 北京
 
   
    
    }

const tj=({match,location})=>{
    console.log(match,location)
    return 

     
hello天津
  
     
{JSON.stringify(location.data)}
     
    }

const baseRouter=()=>{
 return (
    
        

        北京
       
        天津
         
        
        
        
        
        
 
      )
    }  
    export default  baseRouter

Switch：只渲染出第一个与当前访问地址匹配的 或

route的props的三个属性（参数）：
match
location
history

exact :精准匹配

replace:替换路径，不会再history中留下记录,表现就是返回的时候直接返回上上一层

Readirect重定向当前路由

  {
                return 
            }}> 

路由传参

方法1：（在link中传参）

1.png

1.png

1.png

方法2：(在route中传参)

1.png

1.png

1.png

---

路径语法：

   // 匹配 /hello/michael 和 /hello/ryan
       // 匹配 /hello, /hello/michael 和 /hello/ryan
           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

---

ps:（本文自写）

import React from 'react';
import Login from '../component/login.jsx'
import {
    BrowserRouter as Router,
    Route,
    Link,
    NavLink,
    Switch
} from 'react-router-dom';
const priate=({match,location,history})=>{
    console.log(match,location,history)
    return 

    

    青岛又吹起了风
    我一个人在海边的夜里发抖
    忽然又想起我那荒唐又无聊的人生
    我努力偏离了航道
    终于捕捉到你的信号
    我曾经伤害也曾经被伤害
    现在只想停泊靠岸
    于是我丢掉了船
    烧掉了帆
    砍断了我的桅杆
    回到那片熟悉的海滩
    
{JSON.stringify(location.data)}
    
}
const paper=({match,location,history})=>{

    return 

    

    你陪我步入蝉夏 越过城市喧嚣
    歌声还在游走 你榴花般的双眸
    不见你的温柔 丢失花间欢笑
    岁月无法停留 流云的等候
    
{match.params.id}
    
}
const sunlight=()=>{
    return 

    

    有道是 山间美
    最美不过是朝晖
    夜里凉 正午晃
    唯有清晨最舒畅
    有好事 成双对
    张家二郎要婚配
    女儿家 在深闺
    嫁做新妇亦不悔
    容我细水长流斟茶一盏为君把歌欢
    莫要急不可待坐立难安杯水不喝完
    本想胡言乱语杜一撰再偷得半日闲
    
    
}
const alone=()=>{
    return 

    

    那是一座看似遥远其实很近的山
    山里有个孤独的人与孤独作伴
    不要问我他的生活还有什么遗憾
    那年九月走的匆忙和飘散的花香
    每个 晚上 都会 幻想
    啦啦 啦啦 独自 歌唱
    如果你也曾像我一样在未知中等待
    等待着另一个孤独的歌者的到来
    我已学会平静对待生活中的无奈
    冷眼看待那些花儿的盛开与衰败
    天黑 夜深 不要 绝望
    
    
}
const all=()=>{
    return 

        
海盗船长
        
纸短情长
        
最美不过是朝晖
        
另一个孤独的歌者
        {
            console.log(props)
          return  
url:{props.match.params.info}
           
        }}> 
    
  
}
export default ()=>{
    return(  
        

            海盗船长{/* 此方法刷新传的参就会消失 */}
 
            纸短情长
            最美不过是朝晖
            另一个孤独的歌者
            全部
            
            {
                let timesTamp=+new Date();
                if(timesTamp%2){
                    //纯组件
                    return priate(props)
                }else{
                    //常规组件
                    return 
                }
            }}> 
             
            
            
            
              
            
                 
        
 
        
     
      
    )
}