React-Routerをアップグレードし、HashHistoryをBrowserHistoryに置き換える -- reactjs フィールド と webpack フィールド と react-router フィールド と phoenix-framework フィールド 関連 問題

Upgrading React-Router and replacing hashHistory with browserHistory












4
vote

問題

日本語

私はReact-Router 1.xとHashhistoryを使用していたブートストラップ+ Reactテーマを持っていて、ハッシュを削除したいと思ったので、このタグ内のタグの内部にあります。

  • React Developerツールは、ルータに null
  • の内側にあることを示しました
  • 私はまたネットワークタブをチェックし、すべてのファイルが正しくダウンロードされ、正しいコンテンツがありました
  • 驚くべきことに、JavaScriptコンソールで印刷されていなかったものであった、エラー/警告なし(私はこれについて本当にショックを受けました、しかし私は何も知りたいのですが。このような状況でやること。 Router.jsx

    の変更点は次のとおりです。 <事前> <コード> import React from 'react' import {render} from 'react-dom' -import {Router} from 'react-router' +// import {Router} from 'react-router' +import { Router, Route, Link, browserHistory } from 'react-router' +// import { useRouterHistory } from 'react-router' +// import { createHashHistory } from 'history' +// import { createBrowserHistory } from 'history'` import History from '../components/layout/navigation/classes/History.js'; import Routes from './Routes.jsx'; +// const appHistory = useRouterHistory(createHashHistory)({ queryKey: false }) + var rootInstance = render(( - <Router history={History}> + <Router history={browserHistory}> {Routes} </Router> ), document.getElementById('smartadmin-root'));`
  • バックエンドでは、 Phoenix Framework 。

    後で編集: ここでは、

    が機能する hashHistory バージョンがあります。

    https://gitlab.com / BlockBuster / React-Router-2-In-Hash-Working / Tree / Master

    とここには browserHistory のバージョンがあります。

    HTTPS:// gitlab・コム/ BlockBuster / React-Router-2-BrowserHistory-Not-Working / Tree / Tree / Master

    両方のREATコードは、 src ディレクトリの下にあります。

    アプリを実行するには、 Elixir List<Object>0 とPostgreSQLがインストールされている必要があります。バックエンドの依存関係を取得します(<コード> List<Object>1 ) List<Object>4 のデータベースのユーザー名とパスワードを変更して、データベースの作成と移行を行うために、<コード> 99888776612 List<Object>3 )を参照します。 hashHistory15 と最後に hashHistory616 を実行します。

    英語

    I have a bootstrap+react theme that was using react-router 1.x and hashHistory and I wanted to remove the hash so followed this advice. Initially I tried to do this while having the 1.x version and I was unable to do it so I've decided to upgrade react-router to 2.x. After installing react-router 2.x the app worked because it was still using hashHistory but when I replaced it with browserHistory:

    • it showed a grey screen
    • the HTML of the app had only the <noscript data-reactid=".0"></noscript> tag inside it
    • the React Developer Tools showed me that the router had a null inside it
    • I also checked the Network tab and all files were downloaded properly, and had the right content
    • surprisingly the was nothing printed in the JavaScript Console, no error/no warnging (I'm really shocked about this, but I'm new React, I would like to know what to do in situations like this). Here are my changes to Router.jsx:

       import React from 'react'  import {render} from 'react-dom' -import {Router} from 'react-router' +// import {Router} from 'react-router' +import { Router, Route, Link, browserHistory } from 'react-router' +// import { useRouterHistory } from 'react-router' +// import { createHashHistory } from 'history' +// import { createBrowserHistory } from 'history'`   import History from '../components/layout/navigation/classes/History.js';   import Routes from './Routes.jsx';  +// const appHistory = useRouterHistory(createHashHistory)({ queryKey: false }) +  var rootInstance = render(( -    <Router history={History}> +    <Router history={browserHistory}>          {Routes}      </Router>  ), document.getElementById('smartadmin-root'));` 

    The backend uses the Phoenix Framework.

    Later Edit: Here you have the hashHistory version that works

    https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master

    And here is the browserHistory version that doesn't:

    https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master

    The react code for both can be found under the src directory.

    To run the app you need to have Elixir, Phoenix and Postgresql installed, to get backend dependencies( run $ mix deps.get), get frontend dependecies( npm install and bower install), to change the database username and password in config/dev.exs, to create and migrate the database mix ecto.create && mix ecto.migrate and finally run mix phoenix.server.

    </div
               
       
       

    回答リスト

    0
     
    vote

    あなたはあなたのrouter.jsxでこのようにしましたか?

    <事前> <コード> import React from 'react' import {render} from 'react-dom' import { Router, Route, Link, browserHistory, useRouterHistory } from 'react-router' import createBrowserHistory from 'history/lib/createBrowserHistory' import History from '../components/layout/navigation/classes/History.js'; import Routes from './Routes.jsx'; const appHistory = useRouterHistory(createBrowserHistory)({ queryKey: false }) var rootInstance = render(( <Router history={appHistory}> {Routes} </Router> ), document.getElementById('smartadmin-root'));
     

    Have you tried it this way in your Router.jsx?

    import React from 'react' import {render} from 'react-dom' import { Router, Route, Link, browserHistory, useRouterHistory } from 'react-router' import createBrowserHistory from 'history/lib/createBrowserHistory'  import History from '../components/layout/navigation/classes/History.js';  import Routes from './Routes.jsx';  const appHistory = useRouterHistory(createBrowserHistory)({ queryKey: false })  var rootInstance = render((     <Router history={appHistory}>         {Routes}     </Router> ), document.getElementById('smartadmin-root')); 
    </div
     
     
       
       
    0
     
    vote

    解決策がないので、私の(ミニマルな)ルーターのバージョンを見つけてください、それは私に働いています。

    依存関係:

    • react@ 15.1.0
    • RECOTION-DOM @ 15.1.0
    • react-router@2.4.0

    history.jsはReact-Routerの依存関係であるため、明示的には必要ありません。

    ウェブパック 必ず

    を追加してください <事前> <コード> devServer: { historyApiFallback: true } webpack-dev-serverが正しくルーティングを行うことがあるため、webpack.config.jsに(ほとんどの後方ナビゲーション)。 <事前> <コード> import React from 'react'; import {render} from 'react-dom'; import {Router, Route, IndexRoute, browserHistory} from 'react-router'; import {Routes} from './Routes'; // your routes file render( <Router history={browserHistory}> {Routes} </Router>, document.querySelector('#smartadmin-root') );

    私はあなたがこのコードを試して、あなたのホットローディングのものを除外することを勧めます。 それが役立つかどうか、そして質問があるならば私に知らせてください。必要に応じて投稿を編集できてうれしいです。

     

    Since there is no solution yet, find my (minimalistic) router version below, that is working for me.

    Dependencies:

    • react@15.1.0
    • react-dom@15.1.0
    • react-router@2.4.0

    History.js is not needed explicitly, since it is a dependency of react-router.

    Webpack Make sure to add

    devServer: {     historyApiFallback: true } 

    to your webpack.config.js, since webpack-dev-server might have some issues routing correctly (mostly in terms of backwards navigation).

    import React from 'react'; import {render} from 'react-dom'; import {Router, Route, IndexRoute, browserHistory} from 'react-router';  import {Routes} from './Routes'; // your routes file  render(     <Router history={browserHistory}>         {Routes}     </Router>,     document.querySelector('#smartadmin-root') ); 

    I would encourage you to try this code and leave out your hotloading stuff. Let me know if it helps and if there are any questions. I'm glad to edit my post as needed.

    </div
     
     

    関連する質問

    0  検査または検証のテスト  ( Testing an or validation ) 
    標準足場を使用して、属性 998877622 および has_many :financedBalances, :through => :saleFinanceCompanies 3 を使用して<コード> has_many :financedBalances,...

    1  検証の代わりに使用するか、代わりに  ( Use or instead of and in the validation ) 
    SELECT1 は、 SELECT2 に少なくとも SELECT3 または SELECT4 または<コード> SELECT5 。 <コード> SELECT6 はすべてのフィールドを持つ必要はありません。ただ十分です。デフォルトのコードはすべてのフィールドの...

    6  プロダクションでElixirアプリケーションをデバッグする方法  ( How to debug an elixir application in production ) 
    これは私の現在の問題については特に存在しないが、一般的には似ています。時々私は生産構成でのみ起こる問題があります、そしてそれをデバッグしたいのですが。 Elixirでそれに近づくための最良の方法は何ですか?製造はグラフィカル環境(Docker)なしで実行されま...

    1  Phoenixリンクのルートを働くことができません  ( Cant get phoenix link route to work ) 
    私は「Radios」とマイホームページのモデルを持っています<コード> (template/page/index.html.eex) は最後に記録されています。これは元気ですが、その特定のレコードの表示ページ<コード> (template/radio/show...

    1  Phoenixコントローラテストでパターンマッチングで2つのマップをアサートする方法  ( How to assert two maps in phoenix controller testing with pattern matching ) 
    私のPhoenix Controllerテストでは、このようなことをしています、 <コード> describe "update/2" do setup [:create_user] test "Edits, and responds with the...

    2  <%= link ..%>でgetTextを使用してください。  ( Use gettext in link ) 
    gettext をI18Nアプリケーションに使用したい。 link 内で使用できる方法はまだわかりません。 「表示」リンクテキストと<コード> 0 のパート?を翻訳する方法 <事前> <コード> 1 ...

    3  Phoenix / Ectoを使用してデータベース内の最後のレコードを表示します  ( Display last record in database using phoenix ecto ) 
    これは私が詳細をオンラインで見つけられなかったという基本的な質問です。 私は「Radios」というモデルを持っています、そして私のホームページに最後に追加されたラジオを表示したいです - templates/page/index.html.eex これ...

    0  Phoenix - GuardiandBとのCase句がエラーの一致しません  ( Phoenix no case clause matching error with guardiandb ) 
    私のPhoenixアプリでは、 href = "https://を使用しています。 github.com/ueberauth/guardian_db "rel =" nofollow noreferrer "> guardiandb ユーザー認証のため。当初、...

    8  Elixir Umbrellaアプリで、ロガーバックエンドアプリが依存関係として追加されるべきですか?  ( In elixir umbrella app where should logger backend app be added as a dependency ) 
    私はエリキシル傘申請を持っています。傘の下のアプリケーションは、 logger 。 <コード> :logger アプリケーションのバックエンドを追加したい( logger_logstash_backend )。そのため、MIXファイルの deps 関数の依存関...

    3  Elixirで変数名を印刷します  ( Print a variable name in elixir ) 
    警告:これは賢い試みです。私はおそらくそれを読むことができるだけであろうと私は知っていますが、それは私が賢くなる方法を知りたくないという意味ではありません:--p 私はこのようなものを持っています(作られた例): <事前> <コード> def glue(%{...




    © 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有