Я использую React с React Router, и у меня есть 3 ссылки, которые имеют тот же путь, что и компонент. Как я могу передать различные параметры при нажатии на компонент?

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

Вы можете использовать свойство to в Link и получить доступ к состоянию в компоненте Example с помощью props.location.state .

Codesandbox

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

Ваш улучшенный код

 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; ); } 

Вот как можно передать свойства через ссылку

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

и получить доступ, как это в компоненте навигации, если это функциональный компонент

 props.location.state.name 

если компонент на основе класса

 this.props.location.state.name