react动态路由（三）

  

App.jsx

import { NavLink,Route,Routes,Navigate, useNavigate } from 'react-router-dom'
import './style.css'
import Home from './Home'
import Recomend from './Recomend'
import Attention from './Attention'
import NotFound from './NotFound'
import Recomend2 from './Recomend2'
import Ranking from './Ranking'
// 手动路由 必须要为类组件 因为函数式组件可以
import About from './About'
import Detail from './Detail'
export default function App() {
    var navigate = useNavigate()
    function navigateto(path){
        console.log(path);
        navigate(path);
    }
        return (
            <div>
                <div className="header">
                    <NavLink to='/home'>发现音乐</NavLink>
                    <NavLink to='/recomend'>我的音乐</NavLink>
                    <NavLink to='/attention'>关注</NavLink>
                    <button onClick ={e=>navigateto('/about')}>关于</button>
                </div>
                <div className="center">
                <Routes>
                    {/* 嵌套路由 */}
                    <Route path='/' element={<Navigate to='/home'/>}></Route>
                    {/* <Route path='/' element={<Home/>}></Route> */}
                    <Route path='/home' element={<Home/>}>
                        <Route path='/home/recomend2' element={<Recomend2/>}></Route>
                        <Route path='/home/ranking' element={<Ranking/>}></Route>
                    </Route>
                    <Route path='/recomend' element={<Recomend/>}></Route>
                    <Route path='/attention' element={<Attention/>}></Route>
                    <Route path='*' element={<NotFound/>}></Route>
                    {/* 手动路由 */}
                    <Route path='/about' element={<About/>}></Route>
                    <Route path='/detail/:id' element={<Detail/>}></Route>
                </Routes>
                </div>
                <div className="footer"></div>
            </div>
        )
}

Detail.jsx组件

import React, { Component } from 'react'
import withRouter from './hoc/withRouter'
export class Detail extends Component {
    render() {
        return (
            <div>
                <h1>详情页</h1>
                <div>当前歌曲:id{this.props.router.params.id}</div>
            </div>
        )
    }
}

export default withRouter(Detail)

hoc文件夹中的withRouter.js

import { useNavigate,useParams } from "react-router-dom"
export default function withRouter (Warpcomment){
    return function (props){
        // 与Ranking中保持一致
        var navigate = useNavigate();
        // 动态路由
        var params = useParams();
        var router = {navigate,params}
        return <Warpcomment{...props} router ={router}></Warpcomment>
    }
}

hoc文件夹中的index.js

import withRouter from "./withRouter";
export default withRouter

Recomend2.jsx组件

import React, { Component } from 'react'
import withRouter from './hoc/withRouter'
export  class Recomend2 extends Component {
    state={
        music:[{id:1,name:'music1'},{id:2,name:'music2'},{id:3,name:'music3'}]
    }
    navigitedetail(id){
        console.log(id);
        this.props.router.navigate('/detail/'+id)
    }
    render() {
        return (
            <div>
                <h1>推荐页面</h1>
                <ul>
                    {this.state.music.map((item)=>{
                        return (<li onClick={e=>this.navigitedetail(item.id)}>{item.name}</li>)
                    })}
                </ul>
            </div>
        )
    }
}
export default withRouter(Recomend2)

Ranking.jsx组件

import React, { Component } from 'react'
import withRouter from './hoc/withRouter'
export class Ranking extends Component {
    navgite(path){
        // navigate为withRouter中定义的保持一致
        this.props.router.navigate(path)
    }
    render() {
        return (
            <div>
                <h1>排行榜</h1>
                <button onClick={e=>this.navgite('/home')}>返回主页</button>
            </div>
        )
    }
}
export default withRouter(Ranking)