web-dev-qa-db-ja.com

リダイレクトまたはリンクを使用せずに、react-router v4でURLを変更する

Reactアプリで react-router v4 および material-ui を使用しています。 GridList 内でGridTileをクリックすると、URLを変更する方法を知りたいと思いました。

私の最初のアイデアは、onTouchTapのハンドラーを使用することでした。ただし、リダイレクトを確認できる唯一の方法は、コンポーネントRedirectまたはLinkを使用することです。これら2つのコンポーネントをレンダリングせずにURLを変更するにはどうすればよいですか？

this.context.router.Push('/foo')を試しましたが、うまくいかないようです。

javascriptreact-routermaterial-uireact-router-v4
31
Alex

これを試して、

this.props.router.Push('/foo')

warning v4より前のバージョンで動作

そして

this.props.history.Push('/foo')

v4以降

52
Ayush Sharma

これを使用してReact Router v4でリダイレクトします。

this.props.history.Push('/foo');

それがあなたのために働くことを望みます;）

36
Jobsamuel

React Router v4

これをスムーズに機能させるために必要なことがいくつかあります。

auth workflow のドキュメントページには、必要なものが非常にたくさんあります。

しかし、私は3つの問題がありました

  1. props.historyはどこから来たのですか？
  2. Routeコンポーネント内に直接ないコンポーネントにパススルーするにはどうすればよいですか
  3. 他のpropsが必要な場合はどうなりますか？

私は最終的に使用しました：

  1. 「React Routerを使用してプログラムでナビゲートする」に関する回答 -つまり、 <Route render> を使用すると、props.historyが子に渡されます。
  2. render={routeProps => <MyComponent {...props} {routeProps} />}を使用して、他のpropsを 「react-router-ハンドラーコンポーネントに小道具を渡す」に関する回答

N.B. renderメソッドでは、Routeコンポーネントからプロップを明示的に渡す必要があります。また、パフォーマンス上の理由から、renderではなくcomponentを使用する必要があります（componentは毎回強制的にリロードします）。

const App = (props) => (
    <Route 
        path="/home" 
        render={routeProps => <MyComponent {...props} {...routeProps}>}
    />
)

const MyComponent = (props) => (
    /**
     * @link https://reacttraining.com/react-router/web/example/auth-workflow
     * N.B. I use `props.history` instead of `history`
     */
    <button onClick={() => {
        fakeAuth.signout(() => props.history.Push('/foo'))
    }}>Sign out</button>
)

私が見つけた紛らわしいことの1つは、React Router v4ドキュメントのかなりの部分でMyComponent = ({ match })を使用していることです。つまり Object destructuring です。 Routeが3つのプロップ、match、location、およびhistoryを渡すことを理解してください

ここでの他の答えのいくつかは、すべてがJavaScriptクラスを介して行われると仮定していると思います。

次に例を示します。また、propsを渡す必要がない場合は、componentを使用できます。

class App extends React.Component {
    render () {
        <Route 
            path="/home" 
            component={MyComponent}
        />
    }
}

class MyComponent extends React.Component {
    render () {
        /**
         * @link https://reacttraining.com/react-router/web/example/auth-workflow
         * N.B. I use `props.history` instead of `history`
         */
        <button onClick={() => {
            this.fakeAuth.signout(() => this.props.history.Push('/foo'))
        }}>Sign out</button>
    }
}
3
icc97

これは私が同様のことをした方法です。 YouTube動画のサムネイルであるタイルがあります。タイルをクリックすると、「video_id」を使用して正しいビデオをページにレンダリングする「player」ページにリダイレクトされます。

<GridTile
  key={video_id}
  title={video_title}
  containerElement={<Link to={`/player/${video_id}`}/>}
 >

ETA：申し訳ありませんが、何らかの理由でLINKまたはREDIRECTコンポーネントを使用したくないことに気づきました。たぶん私の答えは何らかの形で助けになるでしょう。 ; ）

0
Barton Young