Ad

React-router V2.0 BrowserHistory Not Working

- 1 answer

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

Ad

Answer

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>

Ad
source: stackoverflow.com
Ad