react中如何在路由中设置参数,即在路由中存数据
时间: 2024-04-29 18:21:12 浏览: 92
在React中,可以使用React Router来设置路由参数并在不同组件之间传递数据。
一种常见的方法是使用路由参数来传递数据。例如,在路由路径中添加一个参数,例如`/user/:id`,其中`:id`表示路由参数。然后,在组件中可以通过`this.props.match.params.id`来获取参数值。例如:
```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const User = (props) => (
<div>
<h2>User ID: {props.match.params.id}</h2>
<Link to="/">Go back to home</Link>
</div>
);
const App = () => (
<Router>
<div>
<h1>My App</h1>
<Route path="/user/:id" component={User} />
</div>
</Router>
);
export default App;
```
在这个例子中,`User`组件将显示一个标题,其中包含路由参数值,并显示一个“返回主页”的链接。在`App`组件中,我们定义了一个路由,其中包含一个路径`/user/:id`和一个组件`User`,这个组件将显示路由参数值。
另一种方法是使用URL查询参数传递数据。例如,在URL中添加一个查询参数,例如`/user?id=123`,然后可以使用`this.props.location.search`来获取查询参数值。例如:
```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const User = (props) => {
const searchParams = new URLSearchParams(props.location.search);
const id = searchParams.get('id');
return (
<div>
<h2>User ID: {id}</h2>
<Link to="/">Go back to home</Link>
</div>
);
};
const App = () => (
<Router>
<div>
<h1>My App</h1>
<Route path="/user" component={User} />
</div>
</Router>
);
export default App;
```
在这个例子中,`User`组件使用`URLSearchParams`对象来解析查询参数,并在页面上显示查询参数值。在`App`组件中,我们定义了一个路由,其中包含一个路径`/user`和一个组件`User`,这个组件将显示查询参数值。
阅读全文