一：路由倆種模式
1：BrowserRouter：( 會出先404url不存在朝卒，在html可以跳是偽url,解決： historyApiFallback:ture 強制頁面訪問index.html)
2:HasHRouter:只存在客戶端,存在服務(wù)端會被忽略（使用查詢字符串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：只渲染出第一個與當(dāng)前訪問地址匹配的 <Route> 或 <Redirect>)
Link翎蹈，
NavLink //與link用法一樣汞舱，區(qū)別是可以添加高亮宇驾，在樣式中定義.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：只渲染出第一個與當(dāng)前訪問地址匹配的 <Route> 或 <Redirect>
route的props的三個屬性（參數(shù)）：
match
location
history
exact :精準(zhǔn)匹配
replace:替換路徑湿故，不會再history中留下記錄,表現(xiàn)就是返回的時候直接返回上上一層
<Link to="/courses" replace />
Readirect重定向當(dāng)前路由
<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>
青島又吹起了風(fēng)
我一個人在海邊的夜里發(fā)抖
忽然又想起我那荒唐又無聊的人生
我努力偏離了航道
終于捕捉到你的信號
我曾經(jīng)傷害也曾經(jīng)被傷害
現(xiàn)在只想停泊靠岸
于是我丟掉了船
燒掉了帆
砍斷了我的桅桿
回到那片熟悉的海灘</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>
有道是 山間美
最美不過是朝暉
夜里涼 正午晃
唯有清晨最舒暢
有好事 成雙對
張家二郎要婚配
女兒家 在深閨
嫁做新婦亦不悔
容我細(xì)水長流斟茶一盞為君把歌歡
莫要急不可待坐立難安杯水不喝完
本想胡言亂語杜一撰再偷得半日閑
</p>
</div>
}
const alone=()=>{
return <div>
<p>
那是一座看似遙遠(yuǎn)其實很近的山
山里有個孤獨的人與孤獨作伴
不要問我他的生活還有什么遺憾
那年九月走的匆忙和飄散的花香
每個 晚上 都會 幻想
啦啦 啦啦 獨自 歌唱
如果你也曾像我一樣在未知中等待
等待著另一個孤獨的歌者的到來
我已學(xué)會平靜對待生活中的無奈
冷眼看待那些花兒的盛開與衰敗
天黑 夜深 不要 絕望
</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{
//常規(guī)組件
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>
)
}
