React-router Link, passare params

Question

Se si dispone di un percorso come ad esempio:

<Route path="https://stackoverflow.com/users/:userId" /> 

E poi si esporta questa strada, e così può essere utilizzato in tutta la vostra applicazione, come ad esempio:

export const MY_ROUTE = '/users/:userId/'; 

<Route path={MY_ROUTE} /> 

Come si imposta il parametro in un collegamento in modo dinamico? cioè mi piacerebbe fare questo:

<Link to={MY_ROUTE} params={{userId: 1}} /> 

ma params viene completamente ignorato ... e interrogazione fa solo una query non un param ... tutte le idee (userid =?)?

Answer 1

Tratto da React Router official docs:

Dalla guida aggiornamento da 1.x alla 2.x:

<Link to>, OnEnter e isActive descrittori di utilizzare la posizione

<Link to> può ora adottare una posizione descrittore oltre alle stringhe. Gli oggetti di ricerca e gli oggetti di scena sono deprecati.

// V1.0.x

<Link to="/foo" query={{ the: 'query' }}/> 

// v2.0.0

<Link to={{ pathname: '/foo', query: { the: 'query' } }}/> 

Purtroppo, non c'è alcun supporto per il passaggio in un oggetto param, voi stessi visto che.

Al fine di utilizzare al dinamicamente il percorso avete proposto, che avrebbe dovuto fare qualcosa sulla falsariga di:

<Link to={ MY_ROUTE.replace(':userId', '<someUserIdFromSomewhere>') }/> 

Oppure si potrebbe ottimizzare ulteriormente dalla anziché esportare una stringa per MY_ROUTE, si potrebbe esportare un userLink funzione in quanto tale:

function userLink(userId) { 
    return `/users/${userId}/`; 
} 

e quindi utilizzare che ovunque si vorrebbe utilizzare un Link al percorso.

Qui di seguito potete trovare supportati i parametri e le API esposte sul Link componente:

Router Link API

Answer 2

Si potrebbe creare una funzione che interpola il parametro userId per creare il percorso, qualcosa di simile:

export const MY_ROUTE = (userId) => `/users/${userId}/`; 

<Route path={MY_ROUTE(':userId')} /> 

E così nel componente

<Link to={MY_ROUTE(1)} params={{userId: 1}} /> 

provare questa soluzione qui: https://jsbin.com/pexikoyiwa/edit?js,console

Answer 3

So che questa è una vecchia questione, ma con Reagire Router V4 è possibile utilizzare il pacchetto di path-to-regexp, che è anche utilizzato da React Router V4.

Esempio:

import {Link} from 'react-router-dom'; 
import {compile} from 'path-to-regexp'; 

const MY_ROUTE = '/users/:userId/'; 
const toPath = compile(MY_ROUTE); 

// Now you can use toPath to generate Links dynamically 
// The following will log '/users/42' to the console 
console.log(toPath({ userId: 42 })); 

Naturalmente è possibile utilizzare il metodo toPath per creare collegamenti adeguati, nonché, ad esempio:

<Link to={toPath({ userId: 42 })}>My Link</Link>