CODEWITHSUNDEEP
javascriptreactjsreact-router
A1ucard
A1ucard

Reputation: 199

React Router With Handler showing blank page

I'm implementing react application. By the way, I'm encountering react router showing blank page without any error or exception. I have searched through stack overflow and knowing that browse history might be missing. I have no luck still even implemented browseHistory and the page is still showing blank.

Here is my code,

import React from 'react';
import ReactDOM from 'react-dom';
//import App from 'components/App.js';
//import Home from 'components/Home.js';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { Router, Route, IndexRoute, browserHistory, hashHistory, RouteHandler } from 'react-router';

injectTapEventPlugin();

var Home = React.createClass({
  render: function() {
    return (<h1>Welcome to the Home Page</h1>);
  }
});

let App = React.createClass({  
  render() {
      <div className="nav">
        <h1>It's work</h1>
        <RouteHandler/>
      </div>
  }
});

let routes = (  
  <Route name="app" path="/" handler={App} >
    <Route name="home" path="/home" handler={Home} />
  </Route>
);

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

Appreciate to somebody's contribution if you have idea about this.

Here is my package json.

{
  "name": "finalize",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-eslint": "^7.2.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "eslint": "^3.18.0",
    "eslint-plugin-react": "^6.10.3",
    "express": "^4.15.2",
    "file-loader": "^0.10.1",
    "react-hot-loader": "^1.3.1",
    "webpack": "^2.3.2",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-hot-middleware": "^2.17.1"
  },
  "dependencies": {
    "material-ui": "^0.17.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2",
    "react-tap-event-plugin": "^2.0.1"
  }
}

Upvotes: 1

Views: 1183

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104479

Issue is you forgot to use return in App component, App is main component, so if you don't return anything it will always show blank page, use this:

let App = React.createClass({  
    render: function {
        return (
               <div className="nav">
                   <h1>It's work</h1>
                   <RouteHandler/>
               </div>
        )
    }
});

Instead of handler use component, handler has been deprecated and doesn't supported in v3.x. check this: https://github.com/ReactTraining/react-router/issues/2887

Use it like this:

let App = React.createClass({  
   render: function() {
      return (
          <div className="nav">
              <h1>It's work</h1>
              {this.props.children}
          </div>
      );
   }
});

let routes = (  
  <Route name="app" path="/" component={App} >
    <Route name="home" path="/home" component={Home} />
  </Route>
);

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

Check the doc also they are using component: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route

Upvotes: 1

Related Questions