Uso React with React Router y tengo 3 enlaces que tienen la misma ruta que el componente. ¿Cómo puedo pasar diferentes parámetros al hacer clic en el componente?

const Example = props ={amp}gt; { console.log("props", props); return ( {amp}lt;div className="App"{amp}gt; {amp}lt;h1{amp}gt;Hello CodeSandbox{amp}lt;/h1{amp}gt; {amp}lt;h2{amp}gt;Start editing to see some magic happen!{amp}lt;/h2{amp}gt; {amp}lt;/div{amp}gt; ); }; function App() { return ( {amp}lt;BrowserRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path={"/example"} render={() ={amp}gt; {amp}lt;Example /{amp}gt;} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;{amp}gt; {amp}lt;Link to={"/example"} params={{ name: "john" }}{amp}gt; {amp}lt;button{amp}gt;name{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;Link to={"/example"} params={{ age: "27" }}{amp}gt; {amp}lt;button{amp}gt;age{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;Link to={"/example"} params={{ surname: "Travolta" }}{amp}gt; {amp}lt;button{amp}gt;surname{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ); } 

CodeSanbox

Puede usar la propiedad to de Link y acceder al estado en el componente Example con props.location.state .

Códigos y caja

 import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Switch, Route, Link } from "react-router-dom"; import "./styles.css"; const Example = props ={amp}gt; { console.log("props", props.location.state); return ( {amp}lt;div className="App"{amp}gt; {amp}lt;h1{amp}gt;Hello CodeSandbox{amp}lt;/h1{amp}gt; {amp}lt;h2{amp}gt;Start editing to see some magic happen!{amp}lt;/h2{amp}gt; {amp}lt;/div{amp}gt; ); }; function App() { return ( {amp}lt;BrowserRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path="/example" component={Example} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;{amp}gt; {amp}lt;Link to={{pathname:"/example", state: {name: "john"}}} {amp}gt; {amp}lt;button{amp}gt;name{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;Link to={{pathname:"/example", state: {age: "27"}}} {amp}gt; {amp}lt;button{amp}gt;age{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;Link to={{pathname:"/example", state: {surname: "Travolta"}}} {amp}gt; {amp}lt;button{amp}gt;surname{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ); } const rootElement = document.getElementById("root"); ReactDOM.render({amp}lt;App /{amp}gt;, rootElement); 

Su código mejorado

 const Example = props ={amp}gt; { console.log("props", props); return ( {amp}lt;div className="App"{amp}gt; {amp}lt;h1{amp}gt;Hello CodeSandbox{amp}lt;/h1{amp}gt; {amp}lt;h2{amp}gt;Start editing to see some magic happen!{amp}lt;/h2{amp}gt; {amp}lt;Link to={{ pathname: "/Example2", state: { name: "Hello world..." } }}{amp}gt; Navigate to Example2 {amp}lt;/Link{amp}gt; {amp}lt;/div{amp}gt; ); }; const Example2 = props ={amp}gt; {amp}lt;h1{amp}gt;Hey...{props.location.state.name}{amp}lt;/h1{amp}gt;; function App() { return ( {amp}lt;BrowserRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path={"/example"} render={() ={amp}gt; {amp}lt;Example /{amp}gt;} /{amp}gt; {amp}lt;Route path={"/Example2"} render={Example2} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;{amp}gt; {amp}lt;Link to={"/example"} params={{ name: "john" }}{amp}gt; {amp}lt;button{amp}gt;name{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;Link to={"/example"} params={{ age: "27" }}{amp}gt; {amp}lt;button{amp}gt;age{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;Link to={"/example"} params={{ surname: "Travolta" }}{amp}gt; {amp}lt;button{amp}gt;surname{amp}lt;/button{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ); } 

Así es como pueden pasar propiedades a través de Link

  {amp}lt;Link to={{ pathname: "/Example2", state: { name: "Hello world..." } }}{amp}gt; Navigate to Example2 {amp}lt;/Link{amp}gt; 

y acceso como este en el componente navegado si es un componente funcional

 props.location.state.name 

si componente basado en clase

 this.props.location.state.name