react-router v2.0浏览器历史记录不起作用

Question

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

Answer 1

您需要在script标记中使用相对于根（或绝对）的URL，否则应用程序最终会在目录中请求脚本，并且服务器将响应（全部）html文件。

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

Answer 2

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 .