Wie verlinke ich auf die aktuelle Seite mit einem anderen Parameter im React Router?

Question

Lassen Sie uns sagen, ich habe die folgenden Routen einrichten (nur ein Beispiel, tatsächlichen Routen sind nicht diese unordentlich):

<Router> 
    <Switch> 
    <Route path="/app/fun/:userid/profile" component={Profile} exact/> 
    <Route path="/photos/:userid" component={Photos} exact/> 
    <Route path="/:userid/contact" component={Contact} exact/> 
    </Switch> 
</Router> 

Von ANY der Seiten oben, wie kann ich auf die SAME verlinken Seite, aber mit einer anderen userid?

zB:

/** 
* Shared component that's rendered by Profile, Photos and Contact 
*/ 
class SharedComponent extends React.Component { 
    render() { 
    const bobId = 423423432; 

    return (
     <div> 
     <Link to={/* what to put here? */}> 
      Redirect to the same page but with Bob's userid 
     </Link> 
     </div> 
    ); 
    } 
} 

export default withRouter(SharedComponent); 

Hinweis: Die Verwendung Router v4

Answer 1

Eigentlich fand ich einen Weg mach das. Nicht sicher, ob es der beste Weg ist, aber es funktioniert:

/** 
* Shared component that's rendered by Profile, Photos and Contact 
*/ 
class SharedComponent extends React.Component { 
    render() { 
    const { location, match } = this.props; 
    const bobId = 423423432; 
    const bobUrl = location.pathname.replace(match.params.userid, bobId); 

    return (
     <div> 
     <Link to={bobUrl}> 
      Redirect to the same page but with Bob's userid 
     </Link> 
     </div> 
    ); 
    } 
} 

export default withRouter(SharedComponent); 

Im Wesentlichen, ich bin die aktuelle URL nehmen (location.pathname) und ersetzt die aktuelle Benutzer-ID (match.params.userid) mit dem neuen id (bobId)

Answer 2

Pass userId mit Pfad Requisiten auf gemeinsam genutzte Komponente reagieren wie unten,

class Profile extends React.Component { 
    render() { 
     const bobId = 423423432; // Pass bobId with path from parent to child 
     return (
      <SharedComponent path={"/stuff1/stuff2/`${bobId}`/profile"} /> 
     ); 
    } 
} 


class SharedComponent extends React.Component { 
    render() { 
    return (
     <div> 
     <Link to={this.props.path}> 
      Redirect to the same page but with Bob's userid 
     </Link> 
     </div> 
    ); 
    } 
} 

export default withRouter(SharedComponent);