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

現在のバージョンのReact Router（v3）では、サーバーの応答を受け入れ、を使用browserHistory.pushして適切な応答ページに移動できます。ただし、これはv4では使用できません。また、これを処理する適切な方法が何かはわかりません。 この例では、Reduxを使用して、ユーザーがフォームを送信すると、components / app-product-form.jsが呼び出さthis.props.addProduct(props)れます。サーバーが成功を返すと、ユーザーはカートページに移動します。 // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } React Router v4の機能からカートページにリダイレクトするにはどうすればよいですか？

361 reactjs  react-router  react-router-v4 

react-routerv3からv4に置き換えたところです。 しかし、のメンバー関数をプログラムでナビゲートする方法がわかりませんComponent。つまり、handleClick()関数では、/path/some/whereいくつかのデータを処理した後に移動したいと思います。以前は次の方法でそれを行っていました。 import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') しかし、v4ではそのようなインターフェースを見つけることができません。 v4を使用してナビゲートするにはどうすればよいですか？

335 reactjs  ecmascript-6  react-router-v4 

オプションのパスパラメーターを使用してパスを宣言したいので、ページを追加すると、何かを追加する（たとえば、データを入力する）ことができます。 http：// localhost / app / path / to / page <= ページをレンダリングします http：// localhost / app / path / to / page / pathParam <= pathParamに従ってデータをページにレンダリングします 私の反応ルータでは、2つのオプションをサポートするために、次のパスがあります（これは簡略化された例です）。 <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> 私の質問は、1つのルートで宣言できるかどうかです。2行目のみを追加すると、パラメーターのないルートが見つかりません。 編集＃1： 次の構文についてここで述べた解決策は私にとってうまくいきませんでした、それは適切なものですか？ドキュメントに存在しますか？ <Route path="/product/:productName/?:urlID?" handler={SomeHandler} /> 私の反応ルーターのバージョンは：1.0.3

306 javascript  reactjs  react-router  react-router-v4 

現在、react router v4を使用してルートをネストするのに苦労しています。 最も近い例は、React-Router v4 Documentationのルート設定 です。 アプリを2つの部分に分割したい。 フロントエンドと管理領域。 私はこのようなことを考えていました： <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> フロントエンドのレイアウトとスタイルは、管理領域とは異なります。したがって、フロントページ内のルートホーム、つまり1つは子ルートである必要があります。 / homeはフロントページコンポーネントにレンダリングされ、/ admin / homeはバックエンドコンポーネント内にレンダリングされます。 私はいくつかのバリエーションを試しましたが、常に/ homeまたは/ admin / homeを打たないことに終わりました。 編集-19.04.2017 この投稿には現在多くの意見があるため、最終的なソリューションで更新しました。誰かのお役に立てば幸いです。 …

261 javascript  reactjs  nested  react-router  react-router-v4 

現在のルートからなんとか渡されたtitlein を表示したい<AppBar />です。 React Router v4では<AppBar />、現在のルートをどのようにしてtitleプロップに渡すことができますか？ <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> カスタムからカスタムタイトルを渡す方法があるpropには<Route />？

181 reactjs  react-router  react-router-v4 

ルートとして機能するボタンがいくつかあります。ルートが変更されるたびに、アクティブなボタンが変更されることを確認したいと思います。 反応ルーターv4でルート変更をリッスンする方法はありますか？

138 react-router-v4 

私は認証されたルートを実装しようとしていましたが、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 

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][1] これは、最初のランディングページで構成したコードです。 <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> 次のページに転送するために、私は単に次のことを行います。 this.props.history.push('/Page2'); ただし、どうすれば前のページに戻ることができますか？下記のようないくつかのことを試しましたが、運がありません：1。this.props.history.goBack(); エラーが発生します： TypeError：nullはオブジェクトではありません（ 'this.props'を評価しています） this.context.router.goBack(); エラーが発生します： TypeError：nullはオブジェクトではありません（ 'this.context'を評価しています） this.props.history.push('/'); エラーが発生します： TypeError：nullはオブジェクトではありません（ 'this.props'を評価しています） Page1以下にコードを投稿します。 import React, {Component} from 'react'; import {Button} from 'react-bootstrap'; class Page1 extends Component { …

91 javascript  reactjs  react-router-v4 

プロジェクトでreact-router-dom4.0.0-beta.6を使用しています。私は次のようなコードを持っています： <Route exact path="/home" component={HomePage}/> そして、HomePageコンポーネントでクエリパラメータを取得したいと思います。location.search次のようなparamを見つけた?key=valueので、解析されません。 react-router v4でクエリパラメータを取得する正しい方法は何ですか？

87 react-router  react-router-v4  react-router-dom