리액턴스 라우터 탐색을위한 리액턴스로드 바

Question

그래서 github처럼로드 바를 구현하고 싶습니다. 다른 페이지로 클릭하여로드가 시작되고 도착하면 완료되어야합니다.

저는 material-ui를 사용 중이며 로더 반응 진행률 막대 플러스로 사용하고 있습니다.

반응 라우터의 라이프 사이클 후크, 즉 componentDidUpdate 및 componentWillReceiveProps를 사용하여 상태를 완료로 설정하려고했습니다.

처음에는 onTouchTap 기능을 메뉴 항목에 연결했지만 제대로 작동하지 않으려 고합니다.

이 기능을 구현하는 가장 좋은 방법은 무엇입니까?

Answer 1

router-resolver에 react-progress-bar-plus을 사용할 수 있습니다. 이 예를 참조하십시오 http://minhtranite.github.io/router-resolver/ex-4

사용법 예 :

// app.js 
//... 
import {RouterResolver} from 'router-resolver'; 
//... 
const routes = { 
    path: '/', 
    component: App, 
    indexRoute: { 
    component: require('components/pages/PageHome') 
    }, 
    childRoutes: [ 
    require('./routes/Example1Route'), 
    require('./routes/Example2Route'), 
    require('./routes/Example3Route') 
    ] 
}; 

const renderInitial =() => { 
    return <div>Loading...</div>; 
}; 

const onError = (error) => { 
    console.log('Error: ', error); 
}; 

ReactDOM.render(
    <Router routes={routes} 
    history={history} 
    render={props => (
     <RouterResolver {...props} renderInitial={renderInitial} onError={onError}/> 
    )}/>, 
    document.getElementById('app') 
); 

그리고 :

이

// components/pages/PageExample1.js 
import React from 'react'; 
import Document from 'components/common/Document'; 

class PageExample1 extends React.Component { 
    static resolve() { 
    return new Promise((resolve) => { 
     setTimeout(() => { 
     resolve('simple data'); 
     }, 2000); 
    }); 
    }; 

    static propTypes = { 
    response: React.PropTypes.string.isRequired 
    }; 

    render() { 
    return (
     <Document title='Example1 | Router resolver' className='page-ex-1'> 
     <h1>Example 1: {this.props.response}</h1> 
     </Document> 
    ); 
    } 
} 

export default PageExample1;