在重定向/路由时将参数传递给自定义ReactJS组件,可以通过以下步骤实现:
<Redirect>
组件进行重定向,并通过to
属性指定目标路径,并在路径中包含参数。例如:<Redirect to="/user/123" />
。useParams
钩子或withRouter
高阶组件来接收传递的参数。useParams
钩子可以在函数组件中使用,而withRouter
高阶组件可以在类组件中使用。下面是一个示例代码,演示了如何在重定向/路由时将参数传递给自定义React组件:
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect, useParams, withRouter } from 'react-router-dom';
// 自定义组件
const UserComponent = () => {
const { id } = useParams(); // 使用useParams钩子接收参数
return <div>User ID: {id}</div>;
};
// 路由配置
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/user/123" /> // 重定向并传递参数
</Route>
<Route path="/user/:id" component={UserComponent} /> // 定义参数传递
</Switch>
</Router>
);
};
export default App;
在上述示例中,当应用启动时,会自动重定向到/user/123
路径,并将参数123
传递给UserComponent
组件。在UserComponent
组件中,可以使用useParams
钩子来获取传递的参数。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。对于React Router的更多详细信息和用法,请参考React Router官方文档。
领取专属 10元无门槛券
手把手带您无忧上云