タグ付けされた質問 「react-router」

私は考えていましたが、クライアントとサーバー間のルーティングに戸惑っています。Webブラウザーにリクエストを送信する前にサーバー側のレンダリングにReactJSを使用し、SPAとして更新することなくページを切り替えるクライアント側のルーティングとしてreact-routerを使用するとします。 頭に浮かぶのは： ルートはどのように解釈されますか？たとえば、ホームページ（/home）から投稿ページ（/posts）へのリクエスト サーバー側またはクライアント上のルーティングはどこに行きますか？ それがどのように処理されるかはどのようにしてわかりますか？

108 javascript  reactjs  routes  react-router  url-routing 

反応アプリをwebpack-dev-serverからnginxに移行しています。 ルートURL "localhost：8080 / login"にアクセスすると、404が表示され、nginxログで取得しようとしていることがわかります。 my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:8080" my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET /login HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X …

107 nginx  react-router 

私がしまし時々見て、人々は自分でコンポーネントをラップwithRouterそれらを輸出しているとき： import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); これは何のために、いつ使うべきですか？

107 reactjs  react-router 

/#/react-routerを使用しているときにブラウザーのアドレスバーに表示されないようにする方法はありますか？それはReactJSについてです。つまり、リンクをクリックして新しいルートに移動すると、localhost:3000/#/またはが表示され localhost:3000/#/aboutます。ルートによります。

103 reactjs  react-router 

IndexRouteとIndexLinkを使用する目的がわかりません。いずれの場合も、Aboutパスがアクティブ化されていない限り、以下のコードはHomeコンポーネントを最初に選択したようです。 <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> 対 <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> 最初のケースの利点/目的は何ですか？

102 javascript  reactjs  react-router  url-routing 

私はReact Routerを初めて使用し、ページをリダイレクトする方法が非常に多くあることを学びました。 使用する browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 使用する this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } React Router v4にはとがthis.context.history.push("/path")ありthis.props.history.push("/path")ます。詳細：React Router v4で履歴をプッシュする方法 これらすべてのオプションに混乱しているのですが、ページをリダイレクトする最善の方法はありますか？

102 reactjs  redux  react-router 

React-Router v3からv4への移行に少し問題があります。v3では、どこでもこれを行うことができました。 import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); これをv4で実現するにはどうすればよいですか。 withRouterあなたがコンポーネントにいるとき、私はその場で、反応コンテキスト、またはイベントルーターの小道具を使用できることを知っています。しかし、それは私には当てはまりません。 私はv4 のNavigatingOutsideOfComponentsと同等のものを探しています

100 reactjs  react-router 

正常に再生するためにreact-router（v4.0.0）およびreact-hot-loader（3.0.0-beta.6）を取得しようとしましたが、ブラウザーコンソールで次のエラーを取得しています： 警告：React.createElement：タイプが無効です-文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得されません：未定義。おそらく、コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れていました。 index.js： import React from 'react'; import ReactDom from 'react-dom'; import routes from './routes.js'; require('jquery'); import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import './css/main.css'; const renderApp = (appRoutes) => { ReactDom.render(appRoutes, document.getElementById('root')); }; renderApp( routes() ); routes.js： import React from 'react'; import { AppContainer } from 'react-hot-loader'; import { Router, Route, browserHistory, …

99 reactjs  react-router  react-hot-loader 

私は以下を持っています： <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> DefaultRouteを使用する場合、* Dashboardはダッシュボード内でレンダリングする必要があるため、SearchDashboardは正しくレンダリングされません。 「app」ルート内のDefaultRouteがルート「searchDashboard」を指すようにしたいと思います。これはReact Routerでできることですか、それとも通常のJavascript（ページリダイレクト用）を使用する必要がありますか？ 基本的に、ユーザーがホームページにアクセスした場合は、代わりに検索ダッシュボードに送信します。だから私は同等のReact Router機能を探していると思いますwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

98 javascript  routes  reactjs  url-redirection  react-router 

私はreact-routerを使用して反応アプリケーションに取り組んでいます。次のようなURLのプロジェクトページがあります。 myapplication.com/project/unique-project-id プロジェクトコンポーネントが読み込まれると、componentDidMountイベントからそのプロジェクトのデータリクエストがトリガーされます。2つのプロジェクトを直接切り替えると、次のようにIDのみが変更されるという問題が発生しています... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMountは再度トリガーされないため、データは更新されません。データ要求をトリガーするために使用する必要がある別のライフサイクルイベントや、この問題に取り組むための別の戦略はありますか？

97 reactjs  react-router 

ReactJsは初めてです。これは私のコードです： var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); そしてそれをwebpackでコンパイルします。また、メインコンポーネントをエイリアスに追加しました。コンソールがこれらのエラーをスローし ます。これらのリンクも読みます。 React Routerが失敗したプロップ「履歴」、未定義 値が定義されていない場合、履歴を解決する必要があるとマークするにはどうすればよいですか？ React-Routerをアップグレードし、hashHistoryをbrowserHistoryに置き換える そしてウェブの周りの多くの検索、しかし私はこの問題を修正することができませんでした。React Routerはバージョン4です

96 reactjs  react-router 

NavLinkの「activeClassName」と「activeStyle」を設定する機能のほかに、使用するために何らかの理由があるNavLinkを介してリンクあなたのサイト上で（ヘッダーやフッターにすなわちないメインNAV）非ナビゲーション要素上の他のルートへのリンクを作成する場合は、アクティブな状態/クラスを必要としませんか？

94 reactjs  react-router  react-router-v4 

閲覧履歴に応じて、いくつかのビジネスロジックを実装する必要があります。 私がやりたいのは次のようなものです。 reactRouter.onUrlChange(url => { this.history.push(url); }); URLが更新されたときにreact-routerからコールバックを受信する方法はありますか？

91 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

React-Router（v4）を試していますが、Navから始めてLink'のいずれかを使用する際に問題が発生しますactive。Linkタグのいずれかをクリックすると、アクティブなものが機能し始めます。ただし、ルートLinkで読み込まれるコンポーネントであるため、アプリが起動したらすぐにHomeをアクティブにしたいです/。これを行う方法はありますか？ これが私の現在のコードです： const Router = () => ( <BrowserRouter> <div> <Nav> <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */} <Link activeClassName='is-active' to='/about'>About</Link> </Nav> <Match pattern='/' exactly component={Home} /> <Match pattern='/about' exactly component={About} /> <Miss component={NoMatch} /> </div> </BrowserRouter> )

91 javascript  reactjs  ecmascript-6  react-router 

私はreactルーターで問題を抱えています（私はバージョン^ 4.0.0を使用しています）。 これは私のindex.jsです import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); App.jsは何でもあります。私はここに基本的なものを投稿しています、それは問題ではないからです（私は信じています） import React, { Component } from 'react'; import logo from './logo.svg'; import …

91 javascript  json  reactjs  react-router