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

土豆切成丝

已于 2022-07-12 00:07:20 修改

阅读量5k

点赞数 5

分类专栏： react 文章标签： react.js 前端

于 2022-07-12 00:05:37 首次发布

本文链接：https://blog.csdn.net/a20201130/article/details/125729769

版权

本文详细介绍了React路由的使用，包括模拟hash路由、基本路由设置、Switch组件和404页面处理，以及编程式路由跳转的两种方式——通过path传递参数和通过state传递对象。同时，还探讨了路由的嵌套应用。

摘要由CSDN通过智能技术生成

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