0

The express jsx engine shows just a blank html page on the browser when i render the file which has the Router tag. Can someone guide or point out what i am doing wrong? Part of the relevant server setup: 

const express = require("express");
const reactEngine = require('express-react-views');

let app = express();

app.set('views', path.join(__dirname, "../views"));
app.set('view engine', 'jsx');
app.engine('jsx', reactEngine.createEngine());

app.use("/testing", function (req, res) {
        res.render("index.jsx");
});

module.exports = app;

And the index.jsx:

const React = require('react');
const ReactRouter = require('react-router');
const createHistory = require('history').createMemoryHistory;
const Router = ReactRouter.Router;
const routes = require('./routes');
const injectTapEventPlugin = require('react-tap-event-plugin');

const historyRoute = createHistory();

injectTapEventPlugin();

class Index extends React.Component {
    render(){
        return(
            <Router routes={routes} history={historyRoute}/>
        );
    }
}

module.exports = Index;

Also the required routes file goes on like this:

const React = require('react');
const ReactRouter = require('react-router');
const Route = ReactRouter.Route;
const IndexRoute = ReactRouter.IndexRoute;

const App = require('./containers/App');
const FormPage = require('./containers/FormPage');
const Dashboard = require('./containers/DashboardPage');

const Routes = props => {
  return (
      <Route path="/" component={App}>
        <IndexRoute component={Dashboard}/>
        <Route path="dashboard" component={Dashboard}/>
        <Route path="form" component={FormPage}/>
      </Route>
  );
};

module.exports = Routes;

Additional information:

  • react version: 15.6.1
  • react-router version: 4.2.0
  • express version: 4.15.4
  • node version: 6.11.3
  • express-react-views: 0.10.2
minus.273
  • 755
  • 11
  • 24
  • IndexRoute is not available in version 4, see this answer https://stackoverflow.com/questions/44452858/configure-nested-routes-in-react-router-v4/44453559#44453559 – Shubham Khatri Oct 02 '17 at 08:54
  • @ShubhamKhatri I understand, thank you. I removed index route and nested Routes just as the answer said. But it still shows a blank page. – minus.273 Oct 02 '17 at 09:04
  • Probably try this `{routes}` I think routes prop is unavailable with. Also instead of Router you need to import BrowserRouter or HashRouter as Router is also unavailable in v4 – Shubham Khatri Oct 02 '17 at 09:08
  • @ShubhamKhatri I tried both BrowserRouter and HashRouter but it gave me this [error](https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=%20Check%20the%20render%20method%20of%20%60Index%60) – minus.273 Oct 02 '17 at 09:24

0 Answers0