web-dev-qa-db-ja.com

Reactルータリダイレクトドロップパラメータ

Reactルーターのnextバージョンを使用していますが、これはパラメーターを削除しているようです。以下のリダイレクトではchannelIdの値が保持されるはずですが、 toルートはパスの代わりにリテラル文字列 ":channelId"を使用します。

<Switch>
  <Route exact path="/" component={Landing} />
  <Route path="/channels/:channelId/modes/:modeId" component={Window} />
  <Redirect
    from="/channels/:channelId"
    to="/channels/:channelId/modes/window" />
</Switch>

これは 解決した問題 のように見えますが、機能していません。 toルートに渡す必要があるものは他にありますか？

javascriptreactjsroutesreact-router
13
Matt Norris

これが私が使用しているもので、他の回答と同様ですが、依存関係はありません：

<Route
  exact
  path="/:id"
  render={props => (
    <Redirect to={`foo/${props.match.params.id}/bar`} />;
  )}
/>
7
Jason D

Reactルーター4のソースにはそのようなロジックは見つかりませんでした。そのため、独自の回避策を記述してください。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import pathToRegexp from 'path-to-regexp';
import { Route, Redirect } from 'react-router-dom';

class RedirectWithParams extends Component {
  render() {
    const { exact, from } = this.props;    
    return (
      <Route
        exact={exact}
        path={from}
        component={this.getRedirectComponent}
      />);
  }

  getRedirectComponent = ({ match: { params } }) => {
    const { Push, to } = this.props;
    const pathTo = pathToRegexp.compile(to);
    return <Redirect to={pathTo(params)} Push={Push} />
  }
};

RedirectWithParams.propTypes = {
  exact: PropTypes.bool,
  from: PropTypes.string,
  to: PropTypes.string.isRequired,
  Push: PropTypes.bool
};

export default RedirectWithParams;

使用例：

<Switch>
   <RedirectWithParams
      exact from={'/resuorce/:id/section'}
      to={'/otherResuorce/:id/section'}
   />
</Switch>
7
Gleb Lobastov

私はこれをしました、そしてそれはうまくいきました：

<switch>
  <Route path={`/anypath/:id`} component={Anycomponent} />
   <Route
      exact
      path="/requestedpath/:id"
      render={({ match }) => {
        if (!Auth.loggedIn()) {
          return <Redirect to={`/signin`} />;
        } else {
          return <Redirect to={`/anypath/${match.params.id}`} />;
        }
      }}
    />
</switch>
3
Emmanuel Ndukwe

あなたはこれを行うことができます：

<Switch>
  <Route exact path="/" component={Landing} />
  <Route path="/channels/:channelId/modes/:modeId" component={Window} />
  <Route
    exact
    path="/channels/:channelId"
    render={({ match }) => (
      <Redirect to={`/channels/${match.params.channelId}/modes/window`} />   
    )}
  />
</Switch>
1
Fábio Santos

この機能はReactルーター4 4.3.0以降 に追加されました。4.3.xより前のバージョンにロックされている場合、Glebの答えは行く。

1
Mike