一、react模拟hash路由的实现
原理:hash路由的原理是监听hashchange事件
import { useEffect, useState } from 'react'
function App() {
let [curHash, setCurHash] = useState('')
useEffect(() => {
function onChange() {
setCurHash(window.location.hash.slice(1))
}
onChange()
window.addEventListener('hashchange', onChange)
return () => {
window.removeEventListener('hashchange', onChange)
}
}, [])
return (<>
<h1>react模拟hash路由的实现</h1>
<ul>
<li>
<a href="#/home">首页</a>
</li>
<li>
<a href="#/news">新闻页</a>
</li>
<li>
<a href="#/seach">搜索页</a>
</li>
</ul>
{renderList(curHash)}
</>)
}
function renderList(curHash) {
switch (curHash) {
case '/home':
return <Home />
case '/news':
return <News />
case '/seach':
return <Seach />
default:
return <NotFound />
}
}
let Home = () => <> <h1>首页/home</h1> </>
let News = () => <><h1>新闻页/news </h1></>
let Seach = () => <><h1>首页/seach</h1></>
let NotFound= ()=><> <h1>404</h1></>
export default App
二、react路由基本使用
安装包 npm i [email protected]
代码部分
import { HashRouter as Router, Route, Link } from 'react-router-dom'
function App() {
return (<>
<h1></h1>
<Router>
<Link to='/home'>首页</Link>--
<Link to='/news'>新闻页</Link>--
<Link to='/seach'>搜索页</Link>
<Route path='/home' component={Home}></Route>
<Route path='/news' component={News}></Route>
<Route path='/seach' component={Seach}></Route>
</Router>
</>)
}
let Home = () => <> <h1>首页/home</h1> </>
let News = () => <><h1>新闻页/news </h1></>
let Seach = () => <><h1>搜索/seach</h1></>
export default App
Link 和 NavLink区别:NavLink指向的路径会自带一css类名
三、swith与404
swith:用Switch组件包裹多个Route
组件。
在Switch
组件下,不管有多少个Route的路由规则匹配成功,都只会渲染第一个匹配的组件
404: 不设置path属性,将404页对应的路由放在switch内部的最后位置
import { HashRouter as Router, Route, NavLink, Switch ,Redirect} from 'react-router-dom'
function App() {
return (<>
<h1></h1>
<Router>
<NavLink to='/home'>首页</NavLink>--
<NavLink to='/news'>新闻页</NavLink>--
<NavLink to='/seach'>搜索页</NavLink>
<hr />
<Switch>
<Route path='/' component={Home} exact strict></Route>
{/* 重定向 */}
<Redirect from='/xxx' exact to='/'></Redirect>
<Route path='/home' component={Home} strict></Route>
<Route path='/news' component={News} strict></Route>
<Route path='/seach' component={Seach} strict ></Route>
<Route component={NotFound}></Route>
</Switch>
</Router>
</>)
}
let Home = () => <> <h1>首页/home</h1> </>
let News = () => <><h1>新闻页/news </h1></>
let Seach = () => <><h1>搜索/seach</h1></>
let NotFound = () => <> <h1>404</h1></>
export default App
四、编程式路由跳转
①通过path进行传递参数
传递参数组件里方法:
let goNews = ()=>{
history.push('/news/13')
}
接收组件:<Route path='/news/:id' component={News} strict></Route>
console.log(useParams());//参数在uesParams()
②传递一个对象通过state进行传递参数
传递参数组件方法:
let goNews = ()=>{
history.push({pathname:'/news',state:{id:1}})
}
接收组件: <Route path='/news' component={News} strict></Route>
console.log(useLocation());//这是个对象 参数在属性state上
五、路由嵌套
import { HashRouter as Router, Route, NavLink, Switch, Redirect ,useHistory,useLocation,useParams,useRouteMatch} from 'react-router-dom'
import './app.css'
function App() {
return (<>
<h1></h1>
<Router>
<NavLink to='/home'>首页</NavLink>--
<NavLink to='/news'>新闻页</NavLink>--
<NavLink to='/seach'>搜索页</NavLink>
<hr />
<Switch>
<Route path='/' component={Home} exact strict></Route>
{/* 重定向 */}
<Redirect from='/xxx' exact to='/'></Redirect>
<Route path='/home' component={Home} strict></Route>
<Route path='/news' component={News} strict></Route>
<Route path='/seach' component={Seach} strict ></Route>
<Route component={NotFound}></Route>
</Switch>
</Router>
</>)
}
function Home() {
return (
<>
<h1>首页/home</h1>
<NavLink to='/home/like'>喜欢</NavLink>---
<NavLink to='/home/top'>排行</NavLink>
{/* 重定向 默认选中 */}
<Redirect from='/home' exact to='/home/like'></Redirect>
<Route path='/home/like' component={Like}></Route>
<Route path='/home/top' component={Top}></Route>
</>
)
}
function Like(){
return(<>
<hr />
<h1>喜欢组件</h1>
</>)
}
function Top(){
return(<>
<hr />
<h1>排行榜组件</h1>
</>)
}
function News(props){
return(
<>
<h1>新闻页/news </h1>
</>
)
}
function Seach(){
return(
<>
<h1>搜索/seach</h1>
</>
)
}
let NotFound = () => <> <h1>404</h1></>
export default App