React Router always displaying IndexRoute

Question

This is my main app file:

import React from 'react';
import { render } from 'react-dom';
import { browserHistory, Router, Route, IndexRoute } from 'react-router';

// Components
import Main from './components/core/Main.component';
import NotFound from './components/core/NotFound.component';
import About from './components/About.component';
import TeaTimer from './components/TeaTimer.component';

// App css
require('style!css!sass!applicationStyles');

render(
    (<div>
      <Router history={browserHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={TeaTimer} />
          <Route component={About} path="/about"/>
        </Route>
        <Route component={NotFound} path="*"/>
      </Router>
    </div>),
    document.querySelector('#app')
);

This is my Main component:

import React, { Component } from 'react';

class Main extends Component {
  render() {
    return (
        <div>
            {this.props.children}
        </div>
    )
  }
}

Main.propTypes = {
  children: React.PropTypes.object
}

export default Main;

This is my express server setup:

var express = require('express');

// Create our app
var app = express();
const PORT = process.env.PORT || 3000;

app.use(function (req, res, next){
  if (req.headers['x-forwarded-proto'] === 'https') {
    res.redirect('http://' + req.hostname + req.url);
  } else {
    next();
  }
});

app.use(express.static('public'));

app.listen(PORT, function () {
  console.log('Express server is up on port ' + PORT);
});

Now when I open the browser and go to http://localhost:3000 I get the TeaTimer component. Same for http://localhost:3000/#/, same for http://localhost:3000/#/about, same for an undefined route - http://localhost:3000/#/sdnaipwnda[j.

But when I go to http://localhost:3000/about I get:

Cannot GET /about

What am I doing wrong?

If you need more info please ask and I will add it to the question, or checkout this git repo.

You need this http://stackoverflow.com/a/30720330/4355342 – Jyothi Babu Araja Jan 04 '17 at 14:12 — Jyothi Babu Araja, Jan 04 '17 at 14:12

score 1 · Accepted Answer · answered Jan 05 '17 at 10:05

OK, this one is straightforward. You're simply using the wrong history. You need hashHistory if you want to have hash-based, i.e. /#/about and such, routes.

import {Router, hashHistory} from 'react-router' ... <Router history={hashHistory}> ...

If you DON'T want a hash-based history, but would rather like regular-looking URL's, like /about and such, then you DO need browserHistory. However, in this case you MUST make sure that your web server serves the same index.html for all route-like URL's. This is explained in the react-router' documentation. You need to add something like this towards the end of your express server's routing configuration:

// handle every other route with index.html, which will contain // a script tag to your application's JavaScript file(s). app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'public', 'index.html')) }) The above code assumes that your index.html file lies in public/, so you might need to change the arguments to path.resolve.

I actually prefer returning index.html only for URL's that don't have an extension. This way you prevent your index.html being served as a .png or .js whenever the requested resource is missing and you get a meaningful 404 instead.

app.get('*', function (request, response){ if (request.path.match(/\/[^\/.]*$/)) { response.sendFile(path.resolve(__dirname, 'public', 'index.html')) } })

Amir-Mousavi · Answer 2 · 2017-01-04T14:46:02.153

0

remove / from path

<Route component={About} path="about"/>

remove

Main.propTypes = {
  children: React.PropTypes.object
}

anyway children are passed as props by default

edited Jan 04 '17 at 14:46

answered Jan 04 '17 at 14:37

Amir-Mousavi

4,273
12
70
123

another it might be from proptypes, if not I am sorry for not being able to help – Amir-Mousavi Jan 04 '17 at 14:47
nah, this does not solve it as well. it's weird because I am not getting any erros at all...Thanks for trying :) – Miha Šušteršič Jan 04 '17 at 14:50
I am not that much familiar with Express, but I think this might help https://github.com/Remchi/reddice/blob/master/server/index.js – Amir-Mousavi Jan 04 '17 at 14:50

score 0 · Answer 3 · edited Oct 14 '22 at 15:27

0

no need to have / inside about path.

render(
    (<div>
      <Router history={browserHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={TeaTimer} />
          <Route component={About} path="about" />
        </Route>
        <Route component={NotFound} path="*" />
      </Router>
    </div>),
    document.querySelector('#app')
);

edited Oct 14 '22 at 15:27

General Grievance

4,555
31
31
45

answered Jan 05 '17 at 06:21

Khalid Azam

1,615
19
17

React Router always displaying IndexRoute

3 Answers3