web-dev-qa-db-fra.com

Réaction Routeur Redirect drops param

J'utilise la version next de React Router, et il semble y avoir un abandon des paramètres. J'espère que la redirection ci-dessous conservera la valeur channelId, mais la route to utilise la chaîne littérale ":channelId" dans le chemin. 

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

Cela ressemble à un problème résolu , mais cela ne fonctionne pas. Dois-je passer d’autre chose à la route to? 

javascriptreactjsroutesreact-router
10
Matt Norris

Je n'ai trouvé aucune telle logique dans les sources de React Router 4, écrivez donc votre propre solution:

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;

exemple d'utilisation:

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

Voici ce que j'ai utilisé, similaire à l'autre réponse mais sans dépendance:

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

Tu peux le faire:

<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

Je l'ai fait et ça a marché: 

<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>

1
Emmanuel Ndukwe

Cette fonctionnalité a été ajoutée à React Router 4 à partir de la version 4.3.0 . Si vous êtes bloqué dans une version antérieure à 4.3.x, la réponse de Gleb est la solution.

0
Mike