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

react-router私は使用することができますLinkネイティブにルータを反応させることにより、処理されたリンクを作成する要素を。 私は内部的にそれが呼び出すのを見ますthis.context.transitionTo(...)。 ナビをしたい。リンクからではなく、ドロップダウン選択から（例として）。コードでこれを行うにはどうすればよいですか？なにthis.context？ Navigationミックスインを見ましたが、これなしでできmixinsますか？

1431 reactjs  react-router 

私はReact-routerを使用しており、リンクボタンをクリックしている間は問題なく動作しますが、Webページを更新すると、必要なものが読み込まれません。 たとえばlocalhost/joblist、リンクを押してここに到着したので、私は入っており、すべてが順調です。しかし、ウェブページを更新すると、次のようになります。 Cannot GET /joblist デフォルトでは、このように機能しませんでした。最初、私は私のURLをそのまま使用localhost/#/しましたがlocalhost/#/joblist、それらは完全に問題なく動作しました。しかし、私はこの種のURLが好きではないので、それを消去しようとすると#、私は書きました： Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); この問題はでは発生しません。この問題はlocalhost/常に私が欲しいものを返します。 編集：このアプリは単一ページであるため/joblist、サーバーに何も要求する必要はありません。 EDIT2：私のルーター全体。 var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler={NotFound}/> </Route> ); Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); });

655 javascript  reactjs  url  react-router 

このエラーが発生しています： キャッチされないエラー：不変の違反：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、オブジェクト：を取得しました。 これは私のコードです： var React = require('react') var ReactDOM = require('react-dom') var Router = require('react-router') var Route = Router.Route var Link = Router.Link var App = React.createClass({ render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/about">About</Link></li> </ul> </div> ) } }) var About = require('./components/Home') ReactDOM.render(( <Router> <Route path="/" component={App}> …

528 reactjs  react-router 

__firebase_request_keyサーバーからのリダイレクト後にTwitterのシングルサインオンプロセスによって生成されたURLからパラメーター値をキャプチャするために、routes.jsxファイルでルートを定義するにはどうすればよいですか？ http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla 私は次のルート設定で試しましたが、 :redirectParamは上記のパラメータをキャッチしていません： <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>

412 reactjs  react-router 

現在のバージョンの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 Routerを使用したReact.jsアプリケーションには次の構造があります。 var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); …

315 javascript  properties  reactjs  react-router 

オプションのパスパラメーターを使用してパスを宣言したいので、ページを追加すると、何かを追加する（たとえば、データを入力する）ことができます。 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 

this.props.history.push('/page')React-Router v4でどのようにパラメーターを渡すことができますか？ .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); });

216 reactjs  react-router 

現在のルートからなんとか渡された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 

ReactとReduxを使用してwebappを開発しています。プロジェクトを開始したとき、次のようになりました。 Line 13: Unexpected use of 'location' no-restricted-globals Search for the keywords to learn more about each error. 私はそれを解決する方法について多くのことを検索しましたが、私が見つけた答えのどれも私を助けませんでしたので、スタックオーバーフローに頼りました。 誰かがこのエラーを修正する方法を知っていますか？私が得ることができるすべての助けに感謝します。

168 javascript  reactjs  react-router  eslint 

誰かが違いを説明できますか <Route exact path="/" component={Home} /> そして <Route path="/" component={Home} /> 「正確」の意味がわかりません

161 reactjs  react-router  react-router-dom 

Reactルーターを使用すると、reactアプリで処理できます/arbitrary/route。これを機能させるには、一致するルートでReactアプリを送信するサーバーが必要です。 しかし、webpack開発サーバーは任意のエンドポイントを処理しません。 追加の高速サーバーを使用するソリューションがあります。 webpack-dev-serverがreact-routerからのエントリポイントを許可できるようにする方法 しかし、ルートマッチングを可能にするために別のExpressサーバーを起動したくありません。Webpack開発サーバーに任意のURLに一致するように伝え、反応アプリを送信したいだけです。お願いします。

148 reactjs  ecmascript-6  webpack  react-router 

私はreact-routerでreactを使用しています。反応ルータの「リンク」でプロパティを渡そうとしています var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link> <RouteHandler/> </div> ); } }); …

137 javascript  reactjs  react-router 

以下を検討してください。 var AppRoutes = [ <Route handler={App} someProp="defaultProp"> <Route path="/" handler={Page} /> </Route>, <Route handler={App} someProp="defaultProp"> <Route path="/" handler={Header} > <Route path="/withheader" handler={Page} /> </Route> </Route>, <Route handler={App} someProp="defaultProp"> <Route path=":area" handler={Area} /> <Route path=":area/:city" handler={Area} /> <Route path=":area/:city/:locale" handler={Area} /> <Route path=":area/:city/:locale/:type" handler={Area} /> </Route> ]; アプリテンプレート、ヘッダーテンプレート、およびパラメーター化された同じハンドラーを持つルートのセット（アプリテンプレート内）があります。何かが見つからないときに404ルートを提供できるようにしたいと考えています。たとえば、/ CA / …

132 react-router