CODEWITHSUNDEEP
reactjsreact-router
Daniel Ertel-Moore
Daniel Ertel-Moore

Reputation: 91

React Router not rendering any components

Some background: I'm learning web development through some bootcamp material provided. Normally everything works the way intended, or I'm able to rectify the mistakes (if there are any), but not with this React Router. Here's the relevant code/info: 

-mainFolder
    -app
        -components
            Chat.js
            Info.js
            Main.js
        -config
            routes.js
        app.js
    -node_modules
    -public
        bundle.js
        index.html
    package.json
    webpack.config.js

My package.json dependencies: 

"dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "create-react-class": "^15.6.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "webpack": "^3.4.1"
  }

My app.js:

var React = require("react");
var ReactDOM = require("react-dom");

var routes = require("./config/routes");

ReactDOM.render(<routes />, document.getElementById("app"));

My routes.js:

var React = require("react");
var createReactClass = require("create-react-class");
var router = require("react-router-dom");

var Route = router.Route;
var Router = router.Router;
var hashHistory = router.hashHistory;
var IndexRoute = router.IndexRoute;

var Main = require("../components/Main");
var Info = require("../components/Info");
var Chat = require("../components/Chat");

var routes = createReactClass({
    render: function() {
        return (
            <Router history={hashHistory}>
                <Route path="/" component={Main}>
                    <Route path="/info" component={Info} />
                    <Route path="/chat" component={Chat} />
                    <IndexRoute component={Info} />
                </Route>
            </Router>
        );
    }
});

module.exports = routes;

My Chat.js, Main.js, and Info.js are just like any of the previous React components I've used, except I've begun using 

var createReactClass = require("create-react-class");
var Chat = createReactClass({ /*code */ });

instead of just "var Chat = React.createClass({ /* code */});" because of the deprecation warning for React.createClass. Changing this back yields nothing.

When I inspect the page, the body of the HTML looks like this:

<body>

    <!-- This is where React will deploy the contents it generates -->
    <div id="app">
        <routes data-reactroot=""></routes>
    </div>

    <!-- All of our JS code will be transpiled into this bundle.js file -->
    <script src="bundle.js"></script>

</body>

Does anything stand out? My Main.js has {this.props.children} in it, and I made sure all of my routes are closed "/". Beyond those things, nothing seems like an obvious fix.

One more thing, I had to change the routes.js file because all of the routing code was inside parentheses for module.exports like so:

module.exports = (
    <Router history={hashHistory}
        ...
    </Router>
);

I changed the routes.js file to reflect what I know to work for exporting a module since I couldn't even find any cases where people mistakenly used parentheses, much less using parentheses in a proper way for that. I'd be surprised to find out this is relevant, but I may as well include everything, right? ¯\_(ツ)_/¯

Upvotes: 0

Views: 508

Answers (1)

Alex Borodin
Alex Borodin

Reputation: 2034

First of all, you use react-router v4, but the code is for v3. For example, v4 doesn't accept history and have no IndexRoute. You code should be like this:

import { BrowserRouter, Route, Switch } from 'react-router-dom'

....
 <BrowserRouter>
   <Main>
     <Switch>
       <Route path="/" exact component={Info} />
       <Route path="/info" component={Info} />
       <Route path="/chat" component={Chat} />
     </Switch>
   </Main>
 </BrowserRouter>

Upvotes: 1

Related Questions