react函数式路由传参
时间: 2024-01-22 20:16:12 浏览: 77
react-router-parameter:react router路由传参Demo
React函数式路由传参可以通过使用React Router库来实现。下面是一个示例:
```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;
const App = () => (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
export default App;
```
在上面的示例中,我们使用`BrowserRouter`作为路由器,并使用`Route`组件来定义不同路径下的组件。通过`Link`组件,我们可以在不同的路径之间进行导航。
如果你想要在路由之间传递参数,可以在路径中使用动态参数。例如:
```javascript
<Route path="/user/:id" component={User} />
```
在上面的例子中,`:id`是一个动态参数,可以在`User`组件中通过`props.match.params.id`来获取。
希望这个例子能帮助到你!如果你有任何其他问题,请随时问我。
阅读全文