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 はまだ開発が進んでいないため、多くの場合、エラーはかなりあいまいです。

Path Matching Guideで提供されている仕様に従っていますが、かなり標準的なように見えるので、react-router 自体に問題があるとしか思えませんか、それとも何か不足していますか?

アップデート

tl;dr: react-router の問題ではありません。

長いバージョン:

どうやら、問題は ReactJS にも React-Router 自体にもないことがわかりました。ほとんどの場合、gulp-webserver (並行して実行されている個別のプロジェクトを接続するためにプロキシを使用して開発するために使用しています) のバグが関係しており、URL がリンク経由ではなくブラウザーに直接入力されるとエラーがトリガーされます。

私はテストを行い、ナビゲート時には正常に動作しますが、この github issueで説明されているように直接アクセスするとクラッシュします。これにより、基本的に機能的なディープリンク テストが実行できなくなりますが、本番環境では動作するはずです。

更新 2

tl;dr: gulp-webserver でも問題ありません。

私の場合、パスに関連してrelativeおり、前述の gulp-webserver の問題ではありません。具体的に言うと、スクリプトと CSS の参照が絶対的であることを確認して、URL に入力しているパスでそれらを見つけようとしないようにする必要がありました。absolute

例えば：

と の 2 つの 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 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: '/'
});
于 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 に答える