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

ReactRouterに新しいタブでリンクを開かせる方法はありますか？私はこれを試しましたが、うまくいきませんでした。 <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> 次のようなものを追加することでそれを綿毛にすることが可能です onClick="foo"にリンクに次のようなものをことは可能ですが、コンソールエラーが発生します。 ありがとう。

90 reactjs  react-router 

プロジェクトで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 

ルーティングに反応してビューを変更するのに問題があります。ユーザーのリストのみを表示したいので、各ユーザーをクリックすると詳細ページに移動する必要があります。ルーターは次のとおりです。 import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import Users from "./components/Users"; import { Router, Route } from "react-router"; import Details from "./components/Details"; ReactDOM.render(( <BrowserRouter> <div> <Route path="/" component={Users} /> <Route path="/details" component={Details} /> </div> </BrowserRouter> ), document.getElementById('app')) URL / detailsを使用すると、ブラウザはそのURLに移動しますが、ビューは変更されません。他のルートは404をスローするため、ルートを認識しているように見えますが、更新されていません。

87 reactjs  react-router 

私は自分のreactサイトでGoogleAnalyticsをセットアップしようとしていますが、いくつかのパッケージに出くわしましたが、例として私が持っているようなセットアップはありません。誰かがこれに光を当てることができることを望んでいました。 私が見ているパッケージは、react-gaです。 私のレンダリングメソッドはindex.js次のようになります。 React.render(( <Router history={createBrowserHistory()}> <Route path="/" component={App}> <IndexRoute component={Home} onLeave={closeHeader}/> <Route path="/about" component={About} onLeave={closeHeader}/> <Route path="/gallery" component={Gallery} onLeave={closeHeader}/> <Route path="/contact-us" component={Contact} onLeave={closeHeader}> <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/> </Route> <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} /> <Route path="/feedback" component={Feedback} onLeave={closeHeader} /> </Route> <Route path="*" component={NoMatch} onLeave={closeHeader}/> </Router>), document.getElementById('root'));

86 google-analytics  reactjs  react-router 

react-routerとreact-bootstrapを使用してスタイリングの問題が発生しています。以下はコードのスニペットです import { Route, RouteHandler, Link } from 'react-router'; import AuthService from '../services/AuthService' import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; <Nav pullRight> <NavItem eventKey={1}> <Link to="home">Home</Link> </NavItem> <NavItem eventKey={2}> <Link to="book">Book Inv</Link> </NavItem> <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown"> <MenuItem eventKey="3.1"> <a href="" onClick={this.logout}>Logout</a> </MenuItem> </NavDropdown> </Nav> これは、レンダリングしたときの外観です。 …

85 react-router  react-bootstrap 

reactjsルーターからLinkコンポーネントを使用していますが、onClickeventを機能させることができません。これはコードです： <Link to={this.props.myroute} onClick='hello()'>Here</Link> これはそれを行う方法ですか、それとも別の方法ですか？

84 reactjs  react-router  react-redux 

私は以下のようなルーターを持っています： <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> これが私が達成したいことです： /loginログインしていない場合は、ユーザーをにリダイレクトします ユーザー/loginがすでにログインしているときにアクセスしようとした場合は、rootにリダイレクトします/ 今私は、ユーザーの状態を確認しようとしているAppのcomponentDidMountような何かを、その後、： if (!user.isLoggedIn) { this.context.router.push('login') } else if(currentRoute == 'login') { this.context.router.push('/') } ここでの問題は、現在のルートを取得するためのAPIが見つからないことです。 このクローズされた問題は、Router.ActiveStateミックスインとルートハンドラーの使用が示唆されていることがわかりましたが、これら2つのソリューションは現在非推奨になっているようです。

83 javascript  reactjs  react-router 

誰かがreact-routerで特定のルートへのアクセスを制限する方法を知っていますか？特定のルートへのアクセスを許可する前に、ユーザーがログインしているかどうかを確認したいと思います。簡単だと思いましたが、ドキュメントではその方法が明確ではありません。 これは、<Route>コンポーネントを定義する場所に設定する必要がありますか、それともコンポーネントハンドラー内で処理する必要がありますか？ <Route handler={App} path="/"> <NotFoundRoute handler={NotFound} name="not-found"/> <DefaultRoute handler={Login} name="login"/> <Route handler={Todos} name="todos"/> {/* I want this to be restricted */} </Route>

83 javascript  reactjs  react-router 

このReactRouter Dom v4の例を見るとhttps://reacttraining.com/react-router/web/example/auth-workflowPrivateRouteコンポーネントがこのような残りの小道具を分解していることがわかります const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } }}/> ) )}/> ) 私はそれが{ component: Component, ...rest }意味することを確信したい： からprops、コンポーネントプロップを取得してから、他のすべてのプロップを取得し、名前propsをに変更restして、ルートrender関数に渡されるプロップの名前付けの問題を回避できるようにします。 私は正しいですか？

83 reactjs  react-router 

数週間前にリリースされたReact Routerの新しいuseHistoryフックを使用しています。私のReact-routerのバージョンは5.1.2です。My Reactのバージョンは16.10.1です。私のコードは一番下にあります。 しかし、react-routerから新しいuseHistoryをインポートすると、次のエラーが発生します。 Uncaught TypeError: Cannot read property 'history' of undefined これは、React-routerのこの行によって引き起こされます function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0; } return useContext(context).history; …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

typescriptを使用して反応ルーターv5.1.2でUseHistoryフックを使用していますか？単体テストを実行すると、問題が発生します。 TypeError：未定義のプロパティ 'history'を読み取れません。 import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { const historyHistory= { replace: jest.fn(), length: 0, location: { pathname: '', search: …

18 reactjs  typescript  react-router  jestjs  enzyme 

私は中に新たなんだNext.jsと私は、スタートページ（からリダイレクトする方法を思ったんだけど/へ）/ハローnextjs例えば。ユーザーがページをロードした後、パス=== / / hello-nextjsにリダイレクトするかどうかを決定します で反応し、ルータ、我々は次のように実行します。 <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

15 html  reactjs  routing  react-router  next.js 

URLパラメータ（id）を取得し、それを使用してコンポーネントにさらにデータを入力する、react-router-domルートに基づいて詳細ビューをロードしようとしています。 私のルートは次のように/task/:idなり、次のようにURLから：idを取得しようとするまで、コンポーネントは正常にロードされます。 import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } = useParams(); this.fetchData(id); } fetchData = id => { // ... }; render() { return <div>Yo</div>; } } export default TaskDetail; これにより次のエラーが発生し、useParams（）を正しく実装する場所がわかりません。 Error: Invalid hook call. Hooks …

14 reactjs  react-router 

Reactの単一ページアプリケーションを作成していますが、スクロール復元がChrome（およびおそらく他のブラウザー）で期待どおりに動作していないようです。 react-router-dom githubリポジトリには、ブラウザーが単一ページアプリのスクロールをネイティブで処理し始めていることを示すページがあり、にhistory.scrollRestoration設定されている場合、動作は従来の非SPA Webページの動作と同様になります。auto。 私が必要とする動作はそのページに示されています： ナビゲーションを上にスクロールして、一番下までスクロールした新しい画面を開始しないようにします。 「戻る」および「進む」クリック（ただし、リンククリックは除く）でのウィンドウとオーバーフロー要素のスクロール位置の復元 しかし、タブやカルーセルを含むルートの動作も無効にする必要があります。 問題に関するChromeの仕様へのリンクは次のとおりです。 OS XのChromeバージョン78.0.3904.97（公式ビルド）（64ビット）で私が観察しているのは、私がhistory.scrollRestoration manual設定から期待しているように見えるものです。つまり、ページの下半分までスクロールしてリンクをクリックすると、次のページが前のページと同じポイントまでページの下半分までスクロールされます。 私はhistory.scrollRestorationさまざまな時点でを確認しましたが、それが開始して留まることauto、デフォルト、 ここでの重要なポイントの1つは、@ TrevorRobinsonの回答によるものです。「スクロール復元時のブラウザの自動試行... ...ほとんどの場合、単一ページのアプリでは機能しません...」OK ...の一貫したサポートが見つかりましたhistory.scrollRestorationが、どうやらブラウザは、実際にスクロールの復元を行っているのがおかしい。次に、ここで注意する必要がありますで。これ、今日の時間を節約できました。 次に、これを手動で行う方法を調べましたが、先の方法がわかりません。react-router-scrollは、React Router v4と互換性がないと述べていますが、この質問の時点で最新のv5については触れていません。では、v5にも互換性がないと思いますか？ 私は前方の道のために、さらに見て、約このSOの答えは見つかったので、ルータのV4に反応してスクロール復元を処理する方法を ...万一、私はそれが前提となりますルータV5に反応して動作しますか？更新：v5では私には機能しないようです。私はいくつかの構成を試しました。また、React Router v4で完全に機能させることもできませんでした。新しいページの一番上までスクロールしていたので、少なくとも生きていることはわかっていましたが、履歴の復元は行われません。 また、react-router-scroll-memoryも機能しましたが、タブやカルーセルに必要なものなど、指定されたルートでのスクロールを無効にするオプションはありません。 私はoaf-react-routerの使用を検討しましたが、特定のルートのスクロール復元またはトップへのスクロールの無効化に関するドキュメントには何も記載されていません。編集：私の回答で概説されているように、実際にこれを処理します。 見落としていることはありますか？この機能を必要とするのは私だけではないため、この問題に対処するための標準は何ですか。エッジの効いた、実験的なことをしているようですが、通常のサイトと同じようにスクロールする必要があります。

11 javascript  reactjs  google-chrome  react-router 

私使用していますが、コンポーネント遅延ロードとしてのWebPACKを使用してルータに反応バンドラ私がホームページにアクセスすると、/ 私はそれをネットワーク]タブで見ることができる bundle.jsロードされ、また、私は、サイドバーの対応コンポーネントで特定のアイテムをクリックしたときたとえば0.bundle.js、ファイル名が正常に読み込まれますが、検索バーからネストされたルート（例http://127.0.0.1:8080/forms/select）に直接移動すると、次のようなエラーが発生します。 GET http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404（見つかりません） このエラーは、bundle.jsがロードされていないことを示しています。つまり、他のチャンクをロードできません。 webpack.config.js const webpack = require('webpack'); module.exports = { entry: './src/index.js', module: { rules: [], }, resolve: { extensions: ['*', '.js', '.jsx'], }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js', }, plugins: [new webpack.HotModuleReplacementPlugin()], devtool: 'cheap-module-eval-source-map', devServer: { contentBase: …

8 javascript  reactjs  webpack  react-router  lazy-loading