2

Currently using react-route v2.0.

I am sure I am over looking something but I am able to get hashHistory working but when implementing browserHistory I get a 404 error msg as I am trying to remove hashHistory in the url and as well would like to know a work around for production.

I been pulling out my hair all afternoon and can't seem to see where I am going wrong.

app/App.jsx

var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').Router;
var routes = require('./config/routes');
var browserHistory = require('react-router').browserHistory;

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

app/config/routes.jsx

var React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Profile = require('../components/Profile');
var Router = require('react-router');
var Route = Router.Route;
var IndexRoute = Router.IndexRoute;

module.exports = (
  <Route path="/" component={Main}>
    <Route path="profile/:username" component={Profile} />
    <IndexRoute component={Home} />
  </Route>
);

Here is a repo that I am working on https://github.com/SOSANA/React.JS-Tutorials-and-Things/tree/master/github-notetaker/04-state-and-props

Hope someone can help

Blah blah
  • 394
  • 2
  • 15

2 Answers2

4

You need to use a root-relative (or absolute) URL in your script tag, otherwise the app ends up requesting the script in a directory and the server responds with the (catch-all) html file.

<script src="/bundle.js"></script>

Alexander Gundermann
  • 286
  • 1
  • 3
1

You need to additionally configure your server when using browserHistory to serve the appropriate resource on the initial page load.

For more details see https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#configuring-your-server.

taion
  • 2,827
  • 1
  • 14
  • 22
  • updated my respo as per the details still not working...even swapped out my server.js with that express example still didn't work. Put my express server.js back to way I had it as it worked with hashhistory – Blah blah Jan 22 '16 at 15:51
  • Link not working, probably want to take a look of this: https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md – Jaakko Karhu Jun 15 '16 at 19:02