Аварийные сегменты динамических сегментов-маршрутизаторов при доступе

У меня есть конфигурация маршрута, которая выглядит так (показывая только те части, которые, по моему мнению, могут быть релевантными):

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 и log this.getParams(), все работает отлично, и файл отображает мне Object {tab: undefined} в консоли. Но как только я попробую host.local/settings/user - где я ожидал, что консоль вернет что-то вроде Object {tab: 'user'} -, все это сработает где-то и просто начинает бросать Uncaught SyntaxError: Unexpected token < в консоль.

Реакция еще молода, поэтому ошибки во многих ситуациях довольно расплывчаты.

Я следил за спецификациями, приведенными в Руководстве по сопоставлению путей, и это кажется довольно стандартным, поэтому я может только предположить, что это проблема с самим реагирующим маршрутизатором или я что-то упускаю?

Update

tl; dr: Это не проблема с реактивным маршрутизатором.

Длинная версия:

По-видимому, выясняется, что проблема не в том, что ReactJS не является самим React-Router. Это связано главным образом с ошибкой gulp -webserver (которую я использую для разработки с использованием прокси для подключения отдельных проектов, работающих параллельно) и вызывает ошибку при вводе URL-адресов непосредственно в браузере вместо доступ через ссылку.

Я сделал тест, и он отлично работает при навигации, но сбой при обращении напрямую, как описано в этот вопрос github, что в основном делает мои функциональные тесты deeplink нежизнеспособными, но они должны работать, когда они производятся.

Обновление 2

tl; dr: Это не проблема с gulp -webserver.

В моем случае это было связано с relative и absolute paths и не проблема с gulp -webserver, как упоминалось ранее. Чтобы быть более конкретным, я должен был убедиться, что ваши ссылки script и CSS являются абсолютными, так что они не пытаются найти их в пути, который вы вводите в URL.

например:.

У вас есть два URL: /settings и /settings/account. В этом случае, если вы включили script в резервном файле, что-то вроде <script src="scripts/main.js"></script>, сервер вернет ему 404, так как в /settings/scripts/main.js нет файла.

Неважно, но на всякий случай, если кто-то еще этого хочет, я надеюсь, что это поможет.

Ответ 1

Спасибо за ваш анализ, это помогло мне понять, что это не проблема с React Router, а мои собственные пути.

Я добавил <base href="/" /> в <head> моего index.html, и он работал (:

Изменить для React Router 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: '/'
});

Ответ 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;

надеюсь, что это поможет