0

私はreact-router（redux-simple-router、fwiwを使用）を使用して単純なことに苦労しています。

次のように定義された基本的なルートがいくつかあります。 

<Route path="/" component={AppRoot}>
        <Route path="all" component={ScheduledReportList} mine={false}/>
        <Route path="mine" component={ScheduledReportList} mine={true}/>
        <Route path="report/:name" component={ScheduledReportList} mine={false}/>
</Route>

ScheduledReportListのrednerメソッドには、mineパラメーターを処理する機能と、小道具の存在（または欠如）を処理するロジックがありますname（関係のない部分を切り取ります）。 

render() {
        const { name } = this.props.params;
        if (name != undefined && name != null) {
            // we are displaying details for a single report only
            let values = getScheduledReports();
            let currentReport = _.find(values, (report) => {
                return report.name == name;
            });
            if (this.props.route.mine) {
                return (
                    <MyReportDetails... />
                );
            } else {
                return (
                    <ReportDetails... />
                );
            }
        } else {
            // we are displaying all reports
            <snip...>
                values.map((report, i) => {
                    let anchor = undefined;
                    if (this.props.route.mine) {
                        anchor = <a onClick={() => {this.props.routeActions.replace('/myreport/' + report.name)}}>{report.name}</a>
                    } else {
                        anchor = <a onClick={() => {this.props.routeActions.replace('/report/' + report.name)}}>{report.name}</a>
                    }
                    <snip...>

私の問題は次のとおりです。クライアント側では、かなりうまくナビゲートできます。routeActions.replace()またはを呼び出すアンカーまたはスパンを使用すると、routeActions.push()すべて問題ありません。問題は特に、「深い」パス (つまり、スラッシュが含まれるパス: /reports/fooReportvs /all) にいるときにページを更新するか、ページに直接移動しようとした場合です。/reports/fooサーバー側でページをロードしようとするとSyntaxError: expected expression, got '<'、webpack js をロードする index.html が予期されていないかのように、エラーが発生します。/mine に問題なく移動できますが、これは意味がありません。

これを直接ナビゲーションと間接ナビゲーションの両方で機能させるために欠けている簡単なことは何ですか? ありがとう！

4

2 に答える 2

0

ええと、私は最終的にそれを理解しました、そしてそれは私が考えていたこととほとんど関係がありませんでした. 私の getScheduledReports() メソッドは、還元状態が移入されるという仮定から外れていたことが判明しました。

reduxストアから状態オブジェクトのnull/undefinedチェックを追加し、存在しない場合はnullを返すことで修正されました。ストアにデータが入力され、レポートが利用可能になると、私のコンポーネントはそれを認識して更新しました。

于 2016-01-20T17:39:48.563 に答える
0

react-router次のようにディープ ルーティングを実行できます。

<Route path="/" component={Layout} >
    <IndexRoute component={Homepage} />
    <Route path="home" component={Homepage} />
    <Route path="bayaans" component={Bayaans} />
    <Route path="read-quran" component={Readquran} />
    <Route path="duas" component={Duas} />
    <Route path="events" component={Events} />
    <Route path="contact" component={Contactpage} />
</Route>

<Route path="/admin" component={AdminLayout} >
    <IndexRoute component={LoginPg} />
    <Route path="dashboard" component={Dashboard} />
    <Route path="list-bayaans" component={AdminBayaansPg} />
    <Route path="list-duas" component={AdminDuasPg} />
    <Route path="list-events" component={AdminEventsPg} />
</Route>
于 2016-12-01T10:46:39.183 に答える