一：路由俩种模式
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>
)
}
