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 (<>
        
react模拟hash路由的实现
        

            

                首页
            
            

                新闻页
            
            

                搜索页
            
        
        {renderList(curHash)}
    )
}
function renderList(curHash) {
    switch (curHash) {
        case '/home':
            return 
        case '/news':
            return 
        case '/seach':
            return 
        default:
            return 
    }
}
let Home = () => <> 
首页/home
 
let News = () => <>
新闻页/news 
let Seach = () => <>
首页/seach
let NotFound= ()=><> 
404
export default App

 二、react路由基本使用

安装包 npm i [email protected] 

代码部分

import { HashRouter as Router, Route, Link } from 'react-router-dom'
function App() {
    return (<>
        

        
            首页--
            新闻页--
            搜索页
            
            
            
        
        
    )
}
let Home = () => <> 
首页/home
 
let News = () => <>
新闻页/news 
let Seach = () => <>
搜索/seach

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 (<>
        

        
            首页--
            新闻页--
            搜索页
            

            
                
                {/* 重定向 */}
                
                
                
                
                
            
        

    )
}
let Home = () => <> 
首页/home
 
let News = () => <>
新闻页/news 
let Seach = () => <>
搜索/seach
let NotFound = () => <> 
404
export default App

四、编程式路由跳转

①通过path进行传递参数

  传递参数组件里方法：

  let goNews = ()=>{

        history.push('/news/13')

    }

接收组件：

 console.log(useParams());//参数在uesParams()

②传递一个对象通过state进行传递参数

传递参数组件方法：

 let goNews = ()=>{

        history.push({pathname:'/news',state:{id:1}})

    }

接收组件： 

 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 (<>
        

        
            首页--
            新闻页--
            搜索页
            

            
                
                {/* 重定向 */}
                
                
                
                
                
            
        

    )
}
function Home() {
    return (
        <>
            
首页/home
            喜欢---
            排行
            {/* 重定向 默认选中 */}
            
            
            
        
    )

}
function Like(){
    return(<>
        

        
喜欢组件
    )
}
function Top(){
    return(<>
    

        
排行榜组件
    )
}
function News(props){
    return(
        <>
        
新闻页/news 
        
    )
}
function Seach(){
    return(
        <>
        
搜索/seach
        
    )
}
let NotFound = () => <> 
404
export default App