URLを変更しない単一ページのWebアプリケーション

Question

OK、私はここで従来の知恵に反していると知っていますが、ここには行きます。私は反応と還元を使用してSPAを構築する方法を学んでおり、状況は順調です。私は反応ルータを組み込んだのですが、それは受け入れられるものと思われたので、今は問題があります。私は自分のSPAを実際のアプリのように動作させて、ユーザーが常にランディングページに来てそこから行くようにしたい。ユーザーがページ間を移動すると、さまざまなものがフェッチされて格納されます。一部のページには承認が必要なものもあれば、そうでないものもあります。問題は、私が反応ルータを使用すると、URLが各ルートで変わるということです。それで、ブックマークを使って次回の訪問に戻ると、アプリは必要なエントリポイントではなく、自分が残したページにジャンプしようとします。これはボンネットの下にたくさんのものをねじ込み、彼らはゴブグドッグを得る。

私は「戻るボタンを壊さないでください」という常識が、なぜユーザーがURLに行っているすべてのことを常に反映しているのか本当に理解したことはありません。このようなドグマのように思えますが、それは何か別の考え方を見つけるのは難しいです。私は、例えばGoogle検索をして、しばらくクリックしたサイトに行き、私が探しているものを見つけずに、私のgoogleに戻るために戻るボタンを使いたい時に行った検索結果を表示する代わりに、そのサイトで行ったすべてのステップをクリックしてクリックします。ブリー。私は最終的にそのタブを閉じてからやり直さなければなりません。これは常に私に起こります。

モバイルアプリでは、ユーザーはいつも着陸ページに着いてそこからクリックするのによく慣れています。なぜ、Webアプリケーションは同じように動作できないのですか？

私の質問は次のとおりです。それをどのようにリアクタンスレスキューアプリケーションに実装するのですか？私は、ユーザーがアプリケーション内の前の「ページ」に行くためにクリックできる内部の「戻る」ボタンを持っています。私はreduxストアで "歴史"を保つことができ、いくつかのgoBackメソッドなどを書き換えてURLを変更しないと思っています。このアプローチを使用する例はありますか？

アドバイスをいただければ幸いです。

Answer 1

あなたが言ったように、それは穀物に逆らって、自分の戻るボタンを作成することはおそらく良い考えではありません。

つまり、react-routerの機能を望んでいない場合は、自分のルータを実装することはあまり難しいことではありません。

あなたは、例えば、履歴リストとモデルあなたのReduxの状態を、

{ 
    history: ["home"], 
    home: { ... }, 
    otherPage: { ... }, 
} 

は、その後、あなたのトップレベルのレンダリング機能にだけページを決定し、レンダリングすることができ、

import HomeComponent from 'components/HomePage' 
import OtherPageComponent from 'components/OtherPageComponent' 

const pages = { 
    'home': HomeComponent, 
    'otherPage': OtherPageComponent 
} 

export class App extends React.Component { 
    ... 
    render() { 
     const CurrentPage = this.props.history[this.props.history.length-1]; 
     return (
      <CurrentPage /> 
     ) 
    } 
} 

export default App; 

あなたは」

// reducer.js 
export default function reducer(state, action) { 
    switch(action.type) { 
     case 'CHANGE_ROUTE': 
      return { 
       ...state, 
       history: state.history.concat([action.route]) 
      } 
     case 'GO_BACK': 
      return { 
       ...state, 
       history: history.slice(0,-1) 
      } 
     default: 
      return state 
    } 
} 

// action.js 
export const changeRoute = (route) => ({ type: 'CHANGE_ROUTE', route }); 
export const goBack =() => ({ type: 'GO_BACK'}); 

次に、ルートを変更するには、ルートを変更する必要があります。関連するアクションを派遣することによりNYページ、

// some-component.js 
import { goBack, changeRoute } from 'action.js' 

... 
// in some render method 

<button onClick={() => dispatch(goBack())}> 
    Go Back 
</button> 
<button onClick={() => dispatch(changeRoute('somePage'))}> 
    Go to some page 
</button> 

はおそらく反応し、ルータのような<Link>コンポーネントのいくつかの種類に合わせてのonClickものをパッケージ化したいと思います。

幸運を祈る！

Answer 2

あなたが提案するものには2つの課題があります。まず、URLがないと、ユーザーは自分の場所をブックマークできなくなります。次に、アプリケーションはブラウザウィンドウ内で動作し、ブラウザウィンドウには戻るボタン（および転送、履歴）があります。

私は、最初のブートストラップの後でRESTful APIを通じてJSONリクエストを行うSPAに取り組んでいます。これは美しく機能しますが、ページの履歴を管理するために余分な作業が必要です。それがなければ、ユーザは、ブラウザの「戻る」ボタンを押すと、アプリケーションからログインページに戻ることができて不満を募らせます。

私たちが管理しているページの履歴は、私たちが管理するものであり、したがって、私たちが望む細かさに管理することができます。 URLを変更しない多くのAPIコールがあります。残念なことに、多くのフレームワークで、彼らはあなたが「ページ」の考え方の中で行動することを期待しています。 （個人的には、バックボタンを無効にして、アプリケーションとしてより多くのユーザーに見せるようにしています）

あなたが作成しているポイントは、私が同意すると思うのは、アプリケーションを構築しており、 「伝統的」なページの概念は、「単一のページのアプリケーション」という概念をあるべきものより幾分少なくする。