Thuc Hồ
Thuc Hồ

Reputation: 75

How to fix blank screen when using react router in redux

With localhost, it's normal. But when I use "npm run build" and upload the source to server live, My page is the blank screen which doesn't have any error, warning. This is my codes. Thanks for any help.

    'use strict';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore , applyMiddleware  } from 'redux';

import dataService from './box-message/api';

import switchsApp from './box-message/reducers';
import App from './box-message/components';

import {Router, Route, browserHistory} from 'react-router';
import MyProfile from './profile';

import '../index.html';
import '../libs/js/socketcluster.min.js';
import '../libs/css/styles.min.css';

window.store = createStore(switchsApp , applyMiddleware(dataService));

window.store.dispatch({type: 'GET_MESSAGE_DATA'});

render(
    <Provider store={window.store} >
        <Router history={browserHistory}>
            <Route path="/" component={App} />
            <Route path="/question" component={MyProfile} />
        </Router>
    </Provider>
    ,document.getElementById('root')
)

Upvotes: 3

Views: 2535

Answers (3)

Thuc Hồ
Thuc Hồ

Reputation: 75

I found the way when run subfolder with react router.

import {Router, Route, browserHistory , hashHistory, IndexRoute , useRouterHistory  } from 'react-router';
import { createHistory } from 'history'

const appHistory = useRouterHistory(createHistory)({
  basename: "/demos/v1"
});
render(
    <Provider store={window.store}>
        <Router history={appHistory}>
            <Route path="/" component={App}>
                <IndexRoute component={BoxMessage} />
                <Route path="/profile" component={MyProfile} >
                    <Route path="/profile/:id" component={MyProfile}/>
                    <Route path="/profile/:id/:fisrt_name" component={MyProfile}/>
                    <Route path="/profile/:id/:fisrt_name/:last_name" component={MyProfile}/>
                    <Route path="/profile/:id/:fisrt_name/:last_name/:avatar" component={MyProfile}/>
                 </Route>
            </Route>
        </Router>
    </Provider> 
    ,
    document.getElementById('root')
) 

Upvotes: 0

Thuc Hồ
Thuc Hồ

Reputation: 75

I edited something in my router. I use "browserHistory" to pretty url . It's working so well at localhost. I can swap router between index and profile page easily. But I meet again "blank screen" problem when upload server live (my domain is https).So i confuse with them . I need to helps . Thanks all!

. P/s : I use react-router : v3.0.2

import {Router, Route, browserHistory , hashHistory, IndexRoute} from 'react-router';

class App extends React.Component{

    constructor(props) {

        super(props);
    }

    render() {
        return (
            <section> 
                {this.props.children}
            </section>
        )
    }
}

render(
    <Provider store={window.store}>
        <Router history={browserHistory}>
            <Route path="/" component={App}>
                <IndexRoute component={BoxMessage} />
                <Route path="/profile" component={MyProfile} />
            </Route>
        </Router>
    </Provider> 
    ,
    document.getElementById('root')
)

Upvotes: 0

Try

<IndexRoute component={App}/>

Upvotes: 1

Related Questions