如何使用 react-routing 按 ID 返回页面?
Posted
技术标签:
【中文标题】如何使用 react-routing 按 ID 返回页面?【英文标题】:How to Return a Page by ID with react-routing? 【发布时间】:2020-11-22 15:55:20 【问题描述】:我刚接触 React,当我点击 View 按钮时,我很难弄清楚如何返回一个新页面(一个组件)。我有一个用户表,每行都有一个 View 按钮。我只能在完全相同的页面中检索数据,但我想在另一个页面中检索我的视图详细信息,其 url 上有其 id,例如:http://user-details-1。有人可以帮我弄这个吗。谢谢!
这是我的视图代码/组件:
import React, useState, useEffect from "react";
import Form from "react-bootstrap/Form";
const ViewUserDetaiils = (props) =>
const [user, setUser] = useState(props.currentUser);
useEffect(() =>
setUser(props.currentUser);
, [props]);
return (
<Form>
<div>
<div>
<strong>Id:</strong> user.id" "
</div>
<div>
<strong>Name:</strong> user.name" "
</div>
<div>
<strong>Contact:</strong> user.contact" "
</div>
<div>
<strong>Email:</strong> user.email" "
</div>
</div>
</Form>
);
;
export default ViewUserDetails;
这是我的路线:
import React, Component from "react";
import BrowserRouter, Route, Switch from "react-router-dom";
import Home from "./containers/Home/Home";
import ViewUserDetails from "./forms/ViewUserDetails";
import PageNotFound from "./page404/page404";
class App extends Component
render()
return (
<BrowserRouter>
<div>
<Switch>
<Route exact path="/" component=Home />
<Route exact path="/home" component=Home />
<Route
exact
path="/view-contact-details/"
component=ViewUserDetails
/>
<Route component=PageNotFound />
</Switch>
</div>
</BrowserRouter>
);
export default App;
这是我在另一个组件(UserTable 组件)中的 View 按钮的代码。:
<Link to="/view-contact-details">
<Button
onClick=() =>
props.viewRow(user);
className="Button muted-Button"
>
View
</Button>
</Link>
【问题讨论】:
【参考方案1】:您的路由必须包含一个 slug(URL 的最后一部分,在本例中为用户 ID)以动态路由它。
<Route
exact
path="/view-contact-details/:id"
component=ViewUserDetails
/>
然后在组件的Link
中将对象传递给属性to
。它接受路径名(包含 slug/id 的路径)和状态(包含您的状态/数据)。
<Link
to=
pathname: `/view-contact-details/$user.id`,
state: users: user
>
<button>View</button>
</Link>;
最后,在您的 ViewUserDetails 组件中,您可以使用useLocation 来获取 Link 中传递的状态。
import React from "react";
import useLocation, Link from "react-router-dom";
import Form from "react-bootstrap/Form";
const ViewUserDetails = _ =>
const state = useLocation();
return (
<Form>
<div>
<div>
<strong>Id:</strong> state.users.id" "
</div>
<div>
<strong>Name:</strong> state.users.name" "
</div>
</div>
</Form>
);
;
export default ViewUserDetails;
这是一个有效的demo,以防您想查看它。
【讨论】:
以上是关于如何使用 react-routing 按 ID 返回页面?的主要内容,如果未能解决你的问题,请参考以下文章
利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载
React-router - 如何在 React 的页面之间传递数据?