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(<Router />,document.getElementById("root"))

Router/Index组件：

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

const tj=({match,location})=>{
    console.log(match,location)
    return <div>
     <h1>hello天津</h1>  
     <p>{JSON.stringify(location.data)}</p>
     </div>
    }

const baseRouter=()=>{
 return (
    <Router>
        <div>
        <Link to="/bj">北京</Link>
       
        <Link to={{pathname:'/tj',data:{a:1,b:2}}}>天津</Link>
        <Switch> 
        <Route exact path="/" component={bg}/>
        <Route path="/bj" component={bg}/>
        <Route path="/tj" component={tj}/>
        </Switch>
        </div>
 </Router>
      )
    }  
    export default  baseRouter

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

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

exact :精准匹配

replace:替换路径，不会再history中留下记录,表现就是返回的时候直接返回上上一层
<Link to="/courses" replace />

Readirect重定向当前路由

  <Route path="/priate" render={()=>{
                return <Redirect to="/paper"/>
            }}></Route> 

路由传参

方法1：（在link中传参）

1.png
1.png
1.png

方法2：(在route中传参)

1.png
1.png
1.png

---

路径语法：

<Route path="/hello/:name">   // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello/:name?">       // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /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 <div>
    <p>
    青岛又吹起了风
    我一个人在海边的夜里发抖
    忽然又想起我那荒唐又无聊的人生
    我努力偏离了航道
    终于捕捉到你的信号
    我曾经伤害也曾经被伤害
    现在只想停泊靠岸
    于是我丢掉了船
    烧掉了帆
    砍断了我的桅杆
    回到那片熟悉的海滩</p>
    <p>{JSON.stringify(location.data)}</p>
    </div>
}
const paper=({match,location,history})=>{

    return <div>
    <p>
    你陪我步入蝉夏 越过城市喧嚣
    歌声还在游走 你榴花般的双眸
    不见你的温柔 丢失花间欢笑
    岁月无法停留 流云的等候</p>
    <p>{match.params.id}</p>
    </div>
}
const sunlight=()=>{
    return <div>
    <p>
    有道是 山间美
    最美不过是朝晖
    夜里凉 正午晃
    唯有清晨最舒畅
    有好事 成双对
    张家二郎要婚配
    女儿家 在深闺
    嫁做新妇亦不悔
    容我细水长流斟茶一盏为君把歌欢
    莫要急不可待坐立难安杯水不喝完
    本想胡言乱语杜一撰再偷得半日闲
    </p>
    </div>
}
const alone=()=>{
    return <div>
    <p>
    那是一座看似遥远其实很近的山
    山里有个孤独的人与孤独作伴
    不要问我他的生活还有什么遗憾
    那年九月走的匆忙和飘散的花香
    每个 晚上 都会 幻想
    啦啦 啦啦 独自 歌唱
    如果你也曾像我一样在未知中等待
    等待着另一个孤独的歌者的到来
    我已学会平静对待生活中的无奈
    冷眼看待那些花儿的盛开与衰败
    天黑 夜深 不要 绝望
    </p>
    </div>
}
const all=()=>{
    return <ul>
        <li><Link to="/all/captain">海盗船长</Link></li>
        <li><Link to="/all/love">纸短情长</Link></li>
        <li><Link to="/all/beauty">最美不过是朝晖</Link></li>
        <li><Link to="/all/singer">另一个孤独的歌者</Link></li>
        <Route path="/all/:info" component={(props)=>{
            console.log(props)
          return  <p>url:{props.match.params.info}</p>
           
        }}></Route> 
    </ul>
  
}
export default ()=>{
    return(<Router>  
        <div>
            <NavLink to={{pathname:'/priate',data:{a:'我穿过峡谷又翻过雪山路过无人的戈壁滩'}}}>海盗船长</NavLink>{/* 此方法刷新传的参就会消失 */}
 
            <NavLink to="/paper/1">纸短情长</NavLink>
            <NavLink to="/sunlight">最美不过是朝晖</NavLink>
            <NavLink to="/alone">另一个孤独的歌者</NavLink>
            <NavLink to="/all">全部</NavLink>
            <Switch>
            <Route exact path="/"component={(props)=>{
                let timesTamp=+new Date();
                if(timesTamp%2){
                    //纯组件
                    return priate(props)
                }else{
                    //常规组件
                    return <Login/>
                }
            }}></Route> 
            <Route path="/priate"component={priate}></Route> 
            <Route path="/paper/:id?"component={paper}></Route>
            <Route path="/sunlight"component={sunlight}></Route>
            <Route path="/alone"component={alone}></Route>
            <Route path="/all"component={all}></Route>  
            </Switch>
                 
        </div> 
        </Router>
     
      
    )
}