React nested route not mounting

Question

I want my routes to look like:

/
/signin
/discussion/:title

However, anything past the second forward slash causes an error, and all of my client-side dependencies are throwing Unexpected token errors. For instance, reactjs, my CSS, nor my image files are being loaded in my index.html file. I'm using ExpressJS on the backend. I use the following line on my server to push the routing to the client:

app.get('*', function(req, res, next) {
  res.sendFile(path.join(__dirname, 'app/index.html'));
});

routes.jsx

var React  = require('react'),
    Router = require('react-router'),
    Route  = Router.Route,
    IndexRoute = Router.IndexRoute,
    App  = require('./components/app/app.jsx'),
    Home = require('./components/pages/home.jsx'),
    Discussion = require('./components/pages/discussion.jsx'),
    DiscussionArea = require('./components/pages/discussionArea.jsx'),
    Signin = require('./components/pages/signin.jsx'),
    NotFound = require('./components/pages/notFound.jsx');

var routes = (
  <Route path='/' component={App}>
    <IndexRoute component={Home} />
    <Route path='discussion' component={Discussion}>
        <Route path='/discussion/area' component={DiscussionArea} />
    </Route>
    <Route path='signin' component={Signin} />
    <Route path='*' component={NotFound} />
  </Route>
);

module.exports = routes;

main.jsx

var React = require('react'),
    ReactDOM = require('react-dom'),
    ReactRouter = require('react-router'),
    Router   = ReactRouter.Router,
    routes = require('./routes.jsx'),
    createHistory  = require('history').createHistory;

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

Why are my nested routes not mounting using react-router?

score 1 · Answer 1 · edited May 23 '17 at 11:51

I found the answer. Refer to this Stackoverflow answer: Minimum nodejs server setup needed for React using react-router and browserHistory

It has something to do with the way my server is serving the paths. My resources are being loaded relative to the URL, when they should be loading from the root of the server.

The solution was to add <base href="/"> to the head of my index.html file.

React nested route not mounting

1 Answers1