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

ReactJSとReact-Routerは初めてです。propsを介し<Link/>てreact-routerからオブジェクトを受け取るコンポーネントがあります。ユーザーがこのコンポーネント内の「次へ」ボタンをクリックするたびに、<Link/>オブジェクトを手動で呼び出します。 現在、refsを使用してバッキングインスタンスにアクセスし、<Link/>生成された「a」タグを手動でクリックしています。 質問：リンクを手動で呼び出す方法はありthis.props.next.goますか（例：）？ これは私が現在持っているコードです： //in MasterPage.js var sampleLink = <Link to="/sample">Go To Sample</Link> <Document next={sampleLink} /> //in Document.js ... var Document = React.createClass({ _onClickNext: function() { var next = this.refs.next.getDOMNode(); next.querySelectorAll('a').item(0).click(); //this sounds like hack to me }, render: function() { return ( ... <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div> ... …

131 javascript  reactjs  react-router 

Reactを使用してWebアプリケーションを開発するときにデフォルトとなった、react-router-domという名前の最新バージョンのreact-routerモジュールを使用しています。POSTリクエスト後にリダイレクトを行う方法を知りたい。私はこのコードを作成していますが、リクエスト後、何も起こりません。私はウェブでレビューしましたが、すべてのデータは以前のバージョンの反応ルーターに関するものであり、最後の更新ではありません。 コード： import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Redirect } from 'react-router' import SignUpForm from '../../register/components/SignUpForm'; import styles from './PagesStyles.css'; import axios from 'axios'; import Footer from '../../shared/components/Footer'; class SignUpPage extends React.Component { constructor(props) { super(props); this.state …

131 javascript  reactjs  react-router 

Reactマップコンポーネントをプロジェクトに追加しようとしていますが、エラーが発生します。Fullstack Reactのブログ投稿を参考にしています。エラーがスローされる場所をgoogle_map.jsの83行目で追跡しました。 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } これが私の地図コンポーネントです。最後の3行である58〜60行目をコメントアウトすると、ページは（マップなしで）正常にロードされます。編集：@Dmitriy Nevzorovが提案した変更を加えましたが、それでも同じエラーが発生します。 import React from 'react' import GoogleApiComponent from 'google-map-react' export class LocationsContainer extends React.Component { constructor() { super() } render() { const style = { width: '100vw', …

130 javascript  google-maps  reactjs  ecmascript-6  react-router 

どちらにもルート、リンクなどがあります。どちらを使用するのですか？それぞれをどこで使用するか本当に混乱しています。サーバ側？クライアント側？ https://reacttraining.com/react-router/ 一部の例では、履歴を渡す必要がありますが、そうでない場合もあります。何をすべきか？ <Router history={browserHistory}> 対 <Router> どちらか一方をいつ使用するかは本当に混乱します。

123 reactjs  react-router 

私は認証されたルートを実装しようとしていましたが、React Router 4はこれが機能しないようになりました： <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> エラーは： 警告：を同じルートで使用<Route component>しないでください<Route children>。<Route children>無視されます その場合、これを実装する正しい方法は何ですか？ react-router（v4）ドキュメントに表示されます。 <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> <Route path="/public" component={Public}/> <Route path="/login" component={Login}/> <PrivateRoute …

122 javascript  reactjs  react-router  react-router-v4 

特定のルートではなく前のページに戻る方法を教えてもらえますか？ このコードを使用する場合： var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); このエラーを取得します。ルーターの履歴がないため、goBack（）は無視されました これが私のルートです： // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> <DefaultRoute name="home" …

121 javascript  reactjs  react-router 

私は以下を持っています： 青い下線を取り除くにはどうすればよいですか？コードは以下のとおりです。 <Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link> MenuItemコンポーネントはhttp://www.material-ui.com/#/components/menuにあります 洞察やガイダンスをいただければ幸いです。前もって感謝します。

121 javascript  reactjs  react-router 

私は、react-routerとともに開発中のwebpack-dev-serverを使用するアプリを作成しています。 webpack-dev-serverは、パブリックエントリポイントが1か所（つまり "/"）にあるとの想定に基づいて構築されているようですが、react-routerではエントリポイントの数に制限はありません。 webpack-dev-serverの利点、特に生産性に優れたホットリロード機能が欲しいのですが、react-routerで設定されたルートをロードできるようにしたいのです。 彼らが一緒に働くようにそれをどのように実装できますか？これを可能にするような方法で、webpack-dev-serverの前で高速サーバーを実行できますか？

117 javascript  reactjs  webpack  react-router 

を使用せずにreact-routerでクエリパラメータを更新する方法を見つけることができないようです<Link/>。hashHistory.push(url)クエリパラメータを登録していないようです。また、クエリオブジェクトなどを2番目の引数として渡すことができないようです。 を使用せずにURL をreact-router から/shop/Clothes/dressesにどのように変更しますか？/shop/Clothes/dresses?color=blue<Link> そして、onChange関数はクエリの変更をリッスンする唯一の方法ですか？クエリの変更が自動的に検出され、パラメーターの変更の方法に反応しないのはなぜですか？

117 reactjs  react-router 

ReactJSアプリで、特定のページから移動したときにユーザーに通知する必要があります。具体的には、アクションを実行するように促すポップアップメッセージ： 「変更は保存されていますが、まだ公開されていません。今すぐ実行しますか？」 これをreact-routerグローバルにトリガーする必要がありますか、これは反応ページ/コンポーネント内から実行できるものですか？ 後者については何も発見していないので、最初のものは避けたい。もちろん、それが標準でない限り、ユーザーがアクセスできる他のすべての可能なページにコードを追加する必要なしに、そのようなことを行う方法を疑問に思います。 どんな洞察も歓迎します、ありがとう！

115 reactjs  react-router 

バンドルされたjsとcssをhtmlテンプレートファイルに挿入するために、webpackとHtmlWebpackPluginを使用しています。 new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), そして、以下のhtmlファイルを生成します。 <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> これは、アプリのルートにアクセスすると正常に機能しlocalhost:3000/ますが、たとえば、localhost:3000/items/1バンドルされたファイルに絶対パスが挿入されていないため、別のURLからアプリにアクセスしようとすると失敗します。htmlファイルがロードされると、/itemsreact-routerがまだロードされていないため、存在しないディレクトリ内でjsファイルを探します。 HtmlWebpackPluginに絶対パスでファイルを挿入させるにはどうすればいいですか？Expressは/distディレクトリではなくディレクトリのルートでファイルを探し/dist/items/main-...min.jsますか？または、問題を回避するためにExpressサーバーを変更できますか？ app.use(express.static(__dirname + '/../dist')); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, '../dist/index.html')); }); 基本的に、私は行を取得する必要があります： <script src="main...js"></script> ソースの先頭にスラッシュを付ける。 <script src="/main...js></script>

113 javascript  express  webpack  react-router 

3つの異なるルートに同じコンポーネントを使用しています。 <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets" component={Home} /> </Router> それを組み合わせるためにとにかくありますか？ <Router> <Route path=["/home", "/users", "/widgets"] component={Home} /> </Router>

113 javascript  reactjs  path  react-router  url-routing 

反応アプリでルートを処理するためにreact-routerを使用しているので、外部リソースにリダイレクトする方法があるかどうか知りたいです。 誰かがヒットしたとしましょう： example.com/privacy-policy リダイレクトしたい： example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies 私はindex.htmlの読み込みでプレーンJSでそれを書くのを避けるのにまったくゼロのヘルプを見つけています： if ( window.location.path === "privacy-policy" ){ window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }

113 javascript  reactjs  redirect  react-router  react-router-redux 

クライアント側のアプリケーションで、reactおよびreact-routerを使用しています。次のようなURLから次のクエリパラメータを取得する方法がわかりません。 http://xmen.database/search#/?status=APPROVED&page=1&limit=20 私のルートは次のようになります（パスは完全に間違っています）。 var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> ); 私のルートは正常に機能していますが、必要なパラメーターを取得するためにパスをフォーマットする方法がわかりません。これについての助けに感謝します！

112 javascript  reactjs  client-side  react-router  client-side-scripting 

別のページに移動すると問題が発生します。その位置は以前のページと同じままです。したがって、自動的に上にスクロールすることはありません。window.scrollTo(0, 0)onChangeルーターでも使用してみました。この問題を修正するためにscrollBehaviorも使用しましたが、機能しませんでした。これについて何か提案はありますか？

111 javascript  reactjs  react-router  react-router-redux