import * as React from 'react' ; import { list } from "../pages/index" ; import IRouterList , { IRouterState } from '../components/Type/Type' ; import { Link , Route , Switch , } from 'react-router-dom' ; import FindMusicChild from "../pages/FindMusic/FindMusicChild/index" ; import Seach from "../components/Seach/Seach" ; import Login from 'src/components/Login/Login' ; import "./Router.scss" ; import LoginPopove from '../components/Login/LoginPopove/LoginPopove' ; import { connect } from "react-redux" ; import { ShowPopoveType } from 'src/components/Type/ReduxType' ; import actionsStore from 'src/redux/actions/actions' ; const mapStateToProps = ( state ) => ( { showPopove : state . showPopove } ) ; const mapDispatch = ( dispatch ) => ( { setTargetPage : ( page ) => dispatch ( actionsStore . setTargetPage ( page ) ) } ) ; class Router extends React . Component { public state : IRouterState ; constructor ( props ) { super ( props ) ; this . state = { defaultName : 'recommend' , findmusicLisDefaultName : 'recommend' } ; this . changeRoute = this . changeRoute . bind ( this ) ; this . changeRouteFind = this . changeRouteFind . bind ( this ) ; } param name public changeRoute = ( name , path ) => { this . setState ( { defaultName : name } ) ; this . props [ "setTargetPage" ] ( path ) ; } ; param name public changeRouteFind = ( name , path ) : void => { this . setState ( { findmusicLisDefaultName : name } ) ; this . props [ "setTargetPage" ] ( path ) ; } ; public async componentDidMount ( ) { const pathname = this . props [ 'location' ] . pathname ; list . forEach ( ( item ) => { if ( item . to === pathname ) { this . setState ( { defaultName : item . classname } ) ; } } ) ; FindMusicChild . forEach ( ( item ) => { if ( item . to === pathname ) { this . setState ( { findmusicLisDefaultName : item . classname } ) ; } } ) ; } public changeRouteDefaultName ( lists , name ) { lists . forEach ( ( item ) => { if ( item . to === name ) { this . setState ( { findmusicLisDefaultName : item . classname } ) ; } } ) ; } public UNSAFE_componentWillUpdate ( nextProps ) { if ( this . props [ "location" ] . pathname !== nextProps [ "location" ] . pathname ) { this . changeRouteDefaultName ( FindMusicChild , nextProps . location . pathname ) ; } } public render ( ) { const routerLink = list . map ( ( item , index ) => { let defaultName = this . state . defaultName ; defaultName = defaultName . replace ( /\"/g , '' ) ; return ( < li key = { index } onClick = { ( ) => this . changeRoute ( item . classname , item . to ) } className = { [ item . classname === defaultName ? 'linkAddBg' : '' , item . classname ] . join ( ' ' ) } > < Link to = { item . to } className = { item . classname } > < em > { item . name } < /em> < /Link> { defaultName === item . classname ? < div className = "triangle" / > : null } { item . hot ? < div className = "hot" > HOT < /div> : null} < /li>); } ) ; const routePage = ( list . concat ( FindMusicChild ) ) . map ( ( item , index ) => { return ( < Route path = { item . to } component = { item . component } key = { index } exact = { true } / > ) ; } ) ; const findMusiceChild = FindMusicChild . map ( ( item , index ) => { return ( < li key = { index } onClick = { ( ) => this . changeRouteFind ( item . classname , item . to ) } > < Link to = { item . to } className = { item . classname } > < em className = { `${ this . state . findmusicLisDefaultName === item . classname ? 'linkSecendAddBg' : null }` } > { item . name } < /em> < /Link> < /li>); } ) ; return ( < div className = "router-view" > < div className = "tabBarBox" > < div className = "tabBar" > < nav className = "navBar" > < h1 className = "logo" > < a href = "#" / > < /h1> < ul > { routerLink } < /ul> { } < Seach /> < div className = "makeCenter" > < Link to = '/MyMusic' className = "makeCenterText" onClick = { ( ) => this . changeRoute ( 'mymusic' , '/MyMusic' ) } > 创作者中心 < /Link> < /div> < Login { ... this . props } /> < /nav> < /div> { this . props [ "showPopove" ] [ "show" ] ? < LoginPopove /> : null} < div className = "bottomSolid" > < ul > { this . state . defaultName . replace ( /\"/g , '' ) === "recommend" ? findMusiceChild : null } < /ul> < /div> < /div> < Switch > { routePage } < /Switch> < /div>); } } export default connect ( mapStateToProps , mapDispatch ) ( Router ) ;