Zusätzliche Parameter in React Router übergeben

Question

Wie kann ich zusätzliche Parameter an die Komponente übergeben, zu der ich übergehe.

Ich habe meine routes.js wie folgt. Ich habe zwei Pfade für die AuthorList und eine für die Details eines Autors erklärt.

Und in meiner AuthorList-Seite gibt es die Funktion wie folgt.

showAuthorDetails(authorId) {    

    var myExtraParams = { key1 : val1, key2 : val2}; 
    hashHistory.push(`/authors/${authorId});  
} 

jetzt in meiner AuthorDetail Seite kann ich authorid erhalten, indem

this.props.params.authorId 

tun Aber ich mag auch myExtraParams als Objekt zu übergeben, aber nicht will, es in der URL erklären und übergebe. Ich möchte myExtraParams irgendwie für den Zugriff auf in der neuen Komponente, vielleicht sagen wie von

this.props.params.myExtraParams 

tun sollte mt das Objekt geben. (Wie es in Angular UI Router mit stateParams passiert)

Wie kann ich das tun?

Answer 1

Sie könnte so etwas wie die Struktur Ihrer Routen versuchen und ändern:

var routes = (
    <Route path="/" component={require('./components/main')}>   
     <Route path="authors" component={require('./components/authors/authorPage')}> 
      <Route path="author/:authorId" component={require('./components/authors/AuthorDetails')}/> 
     </Route> 
    </Route> 
); 

Dann in Ihrem Author Seite Sie tun könnten

... 
renderAuth() { 
    if (this.props.children === null) { 
     return(
      ....your default authorList 
     ) 
    } else { 
     return React.cloneElement(this.props.children || <div />, {myExtraParams: myExtraParams}); 
    } 
} 

render() { 
    <div> 
     {this.renderAuth()} 
    </div> 
} 

showAuthorDetails(authorId) {    
    hashHistory.push(`/authors/author/${authorId});  
} 
... 

Sie sollten dann in der Lage sein, dies zugreifen. props.myExtraParams in Ihren AutorenDetail-Seite

Answer 2

Ich schaue mir diese Frage an. Vielleicht haben ich am Ende und Sie bereits die Lösung, aber im Fall bekommen, wenn nicht, dann können Sie einfach das tun, indem

router.push({ 
 
    pathname: '/some-route', 
 
    search: '?param=123', 
 
    state: { 
 
    additionalParam: 'value', 
 
    }, 
 
})}

Und auf der Empfangskomponentenseite, werden Sie es als

erhalten

this.props.location.state.additionalParam

ich hoffe, es hilft. Im Falle weiterer Hilfe, lassen Sie es mich wissen.

Dank