Question

I am using material-ui and react-router to render different pages based on the url set by router.

I have different files :

Main.js - Which in default displays Appbar and footer component. And I have to render other components in between
App.js - For setting up router.

Following is the code :

import React from 'react';
import {render} from 'react-dom';
import App from './Main'; // Our custom react component
import { hashHistory, Router, Route,  IndexRoute, IndexLink, Link } from 'react-router'

injectTapEventPlugin();

render((
   <Router history={browserHistory}>
    <Route path="/" component={App}>

    </Route>
  </Router>), document.getElementById('app'));

Main.js:

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import Main from './Theme'; // Our custom react component
import FooterPanel from './FooterPanel'; // Our custom react component



const muiTheme = getMuiTheme({
  fontFamily: 'Roboto, sans-serif',
  palette: {
    textColor: Colors.darkBlack,
    primary1Color: Colors.white,
    primary2Color: Colors.indigo700,
    accent1Color: Colors.redA200,
    pickerHeaderColor: Colors.darkBlack,
  },
  appBar: {
    height: 60,
  },
});

class App extends React.Component {
  render() {

    return (
      <MuiThemeProvider muiTheme={muiTheme}>

        <div>
          <Main />
          { this.props.children }
          <FooterPanel />
        </div>



      </MuiThemeProvider>
    );
  }
}

export default App;

The same code works fine when I try to render the component individually in my page. But, it doesn't display anything while using react-router.

Did I miss anything in the code? There is no any error in the console as well. So, I can't debug the error. Please help me out.

Answer 1

Import browserHistory instead of hashHistory from react-router.

Anyway, if you are not sure which history type to use, check the history docs from react-router to get a better insight, so that you can see which one suits you the most for your project.

React Router not rendering the page

1 个答案: