wake-up-neo.net

Reagiere Router Umleitung löscht param

Ich verwende die next-Version von React Router und scheint Params fallen zu lassen. Ich gehe davon aus, dass die Weiterleitung den Wert von channelId beibehält, aber die to-Route verwendet stattdessen die Literalzeichenfolge ":channelId" im Pfad. 

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

Das sieht aus wie ein gelöstes Problem , aber es funktioniert nicht. Gibt es noch etwas, das ich zur to-Route übergehen muss? 

10
Matt Norris

Ich habe keine solche Logik in den Quellen von React Router 4 gefunden. Schreiben Sie daher eine eigene Umgehung:

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;

anwendungsbeispiel:

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

Folgendes habe ich verwendet, ähnlich wie die andere Antwort, jedoch ohne Abhängigkeit:

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

Du kannst das:

<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

Ich habe das gemacht und es hat funktioniert: 

<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

Diese Funktionalität wurde zu React Router 4 ab 4.3.0 hinzugefügt. Wenn Sie in einer Version vor 4.3.x eingesperrt sind, ist Glebs Antwort der richtige Weg.

0
Mike