42

我有一个看起来像这样的路由配置（仅显示我认为可能相关的部分）：

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 还很年轻，因此在许多情况下错误相当模糊。

我遵循了路径匹配指南中提供的规范，它看起来很标准，所以我只能假设这是 react-router 本身的问题，还是我遗漏了什么？

更新

tl; dr：这不是 react-router 的问题。

长版：

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

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

更新 2

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

就我而言，它relative与absolute路径有关，与前面提到的 gulp-webserver 没有任何问题。更具体地说，我必须确保您的脚本和 CSS 引用是绝对的，这样它就不会尝试在您输入 URL 的路径中找到它们。

例如：

您有两个 URL：/settings和/settings/account. 在这种情况下，如果您将脚本包含在后备文件中，类似于<script src="scripts/main.js"></script>，服务器将为它返回 404，因为/settings/scripts/main.js.

我很愚蠢，但万一其他人为此而堕落，我希望这会有所帮助。

4

2 回答 2

47

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

我添加<base href="/" />到<head>我的中index.html并且它有效（：

编辑 React 路由器 3：

自 2016 年初以来，React Router 将在您设置时显示警告<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

最好做这样的事情：

const history = useRouterHistory(createHistory)({
    basename: '/'
});
于 2015-12-30T08:53:45.440 回答
1

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

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

'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;

希望这些会有所帮助

于 2015-02-01T10:52:22.733 回答