如何使用 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-router导航到具体的孩子

顺丰同城开放平台返点吗

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

React-router - 如何在 React 的页面之间传递数据?

刷新浏览器时如何使react-router v4:id-path工作?

react-router的使用——URL的hashHTML5的historyRouter的基本使用