我将 React 与 React Router 一起使用,并且我有 3 个链接与组件具有相同的路径。如何在点击组件时传递不同的参数?
const Example = props => {
console.log("props", props);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
};
function App() {
return (
<BrowserRouter>
<Switch>
<Route path={"/example"} render={() => <Example />} />
</Switch>
<>
<Link to={"/example"} params={{ name: "john" }}>
<button>name</button>
</Link>
<Link to={"/example"} params={{ age: "27" }}>
<button>age</button>
</Link>
<Link to={"/example"} params={{ surname: "Travolta" }}>
<button>surname</button>
</Link>
</>
</BrowserRouter>
);
}
您可以使用Link的to属性,并使用 访问 Example 组件中的状态props.location.state
。
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import "./styles.css";
const Example = props => {
console.log("props", props.location.state);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
};
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/example" component={Example} />
</Switch>
<>
<Link to={{pathname:"/example", state: {name: "john"}}} >
<button>name</button>
</Link>
<Link to={{pathname:"/example", state: {age: "27"}}} >
<button>age</button>
</Link>
<Link to={{pathname:"/example", state: {surname: "Travolta"}}} >
<button>surname</button>
</Link>
</>
</BrowserRouter>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句