React Router Redirect drops param

问题:

I am using the next version of React Router, and it seems to be dropping params. I expect the redirect below to retain the value of channelId, but the to route uses the literal string ":channelId" in the path instead.

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

This looks like a resolved issue, but it's not working. Is there something else I need to pass to the to route?

回答1:

Here's what I've been using, similar to the other answer but without a dependency:

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

回答2:

I found no such logic in React Router 4 sources, so write own workaround:

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;

usage example:

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

回答3:

I did this, and it worked:

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

回答4:

You can do this:

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

回答5:

This functionality has been added to React Router 4 as of 4.3.0. If you're locked into a version before 4.3.x, Gleb's answer is the way to go.