Question

我的路线配置看起来像这样（只显示我认为可能相关的部分）：

var React = require('react');

var Router = require('react-router');
var { Route, DefaultRoute, NotFoundRoute } = Router;

var routes = (
    <Route handler={AppHandler}>
        <DefaultRoute handler={HomeHandler}/>
        <Route name='home' path='/home' handler={HomeHandler}/>
        <Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
        <NotFoundRoute handler={NotFoundHandler}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
    React.render(<Handler/>, document.getElementById('application'));
});

现在，在我的设置反应文件中，我有以下内容：

var Settings = React.createClass({
    mixins: [Router.State],
  render: function() { ... }
});

如果我访问host.local/settings并登录this.getParams()，一切正常，文件呈现在控制台中显示Object {tab: undefined}。但是一旦我尝试host.local/settings/user - 我希望控制台返回类似Object {tab: 'user'}的东西 - ，整个事情就会崩溃并开始在控制台中抛出Uncaught SyntaxError: Unexpected token <。

React仍然年轻，因此在许多情况下错误相当模糊。

我已按照 Path Matching Guide 上提供的规格进行操作，看起来非常标准，所以我只能假设它本身就是反应路由器的问题，或者我错过了什么？< / p>

更新

tl; dr：这与react-router没有问题。

长版：

显然，事实证明问题不在于ReactJS和React-Router本身。它主要涉及 gulp-webserver 上的一个错误（我用它来开发使用代理来连接并行运行的单独项目）并在直接在浏览器上键入URL而不是被访问时触发错误通过链接。

我做了一个测试，它在导航时工作正常，但在 this github issue 中直接访问时崩溃，这基本上使我的功能性深层链接测试不可行，但在生产时应该可以工作

更新2

tl; dr：gulp-webserver也不是问题。

在我的情况下，它与relative和absolute路径相关，与gulp-webserver 没有任何问题，如前所述。更具体地说，我必须确保您的脚本和CSS引用是绝对的，以便它不会尝试在您在URL中键入的路径中找到它们。

e.g：

您有两个网址：/settings和/settings/account。在这种情况下，如果您在回退文件中包含的脚本类似于<script src="scripts/main.js"></script>，则服务器将为其返回404，因为/settings/scripts/main.js中没有文件。

我是傻瓜，但万一其他人为此而堕落，我希望这会有所帮助。

Answer 1

感谢您的分析，它帮助我意识到它不是React Router的问题，而是我自己的路径。

我已将<base href="/" />添加到<head>的{{1}}中并且有效（

编辑React Router 3：

自2016年初以来，当您设置index.html：

时，React路由器会显示警告

<base>

做这样的事情会更好：

Warning: Automatically setting basename using <base href> is deprecated 
and will be removed in the next major release. The semantics of <base href>    
are subtly different from basename. Please pass the basename explicitly in the
options to createHistory

Answer 2

我没有遇到你所看到的错误。看起来你的代码没问题，所以它可能是你没有粘贴的东西。

提供信息，我根据您的规范建立了一个快速项目，这是我的设置

'use strict';

var React           = require('react'),
    Router          = require('react-router'),
    AppHandler      = require('./pages/app.js'),
    HomeHandler     = require('./pages/home.js'),
    SettingsHandler = require('./pages/setting.js'),
    NotFoundHandler = require('./pages/not-found.js'),

    Route           = Router.Route,
    NotFoundRoute   = Router.NotFoundRoute,
    DefaultRoute    = Router.DefaultRoute,
    Routes;

Routes = (
    /* jshint ignore:start */
    <Route handler={AppHandler}>
        <DefaultRoute handler={HomeHandler}/>
        <Route name='home' path='/home' handler={HomeHandler}/>
        <Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
        <NotFoundRoute handler={NotFoundHandler}/>
    </Route>
    /* jshint ignore:end */
);

Router.run(Routes, Router.HistoryLocation, function (Handler, state) {
    React.render(<Handler/>, document.body);
});

我正在跳过房子而没有找到，因为那些不是问题，这是我在settings.js中的设置

'use strict';
var React = require('react')
    Router = require('react-router');

var Setting = React.createClass({

    mixins: [Router.State],
    componentDidMount: function() {
        //console.log(this.getParams());
    },

    render: function() {
        /* jshint ignore:start */
        console.log(this.getParams());
        return (
            <div>this is setting</div>
        );
        /* jshint ignore:end */
    }

});

module.exports = Setting;

希望这些能有所帮助

在访问时，react-router动态段崩溃

更新

更新2

2 个答案: