React路由跳转及路由传参的几种方式

一、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