如何导航到另一个功能组件并在 ReactJs 中传递一个值

Question

我想从仪表板中的用户列表中传递特定用户的 ID。我有一个名为 Expand 的按钮，当我单击此按钮时，它会将我带到另一个页面，该页面将显示所有用户的信息和详细信息。

我正在尝试传递用户 ID，以便能够从我的数据库中获取指定用户的信息

当我单击展开按钮时，我正在从客户列表页面移动到客户资料页面。

但是在第二页上，我得到的值是未定义的。

我的代码：

const CustomerList = () => {
  const navigate = useNavigate();
  const [data, setData] = useState([]);
  const [id, setID] = useState("");
  const list = []
  useEffect(() => {
    firebase.firestore().collection("Users").get().then((userSnapshot) => {

      userSnapshot.forEach((doc) => {
       
        const {powerAccount,first_name,registerDate,email,company,country,phone} = doc.data();
        list.push({
          usersID:doc.id,
          powerAccount:powerAccount,
          first_name:first_name,
          registerDate:registerDate,
          email:email,
          company:company,
          country:country,
          phone:phone,
        });
       
      })
      setData(list);
      console.log(list)

    })
  
  },[]);

 return (
          <Button
           color="primary"
           variant="contained"
            onClick={()=>{
            navigate('/app/CustomerDetails', { state: { id: data.usersID } });//this is how i am navigating and passing the value
                  }}
                >
                Expand
           </Button>
)

在我的第二页：

const CustomerProfile = (props) => {

  const {state} = useLocation();
  const { id } = state; // Read values passed on state
  console.log(id)//here i get this log as undefined
  const [name,setName] = useState("");

  useEffect(() => {

    firebase.firestore().collection("Users").doc(id).get().then((userSnapshot) => {

      console.log(userSnapshot.data())// here i get this log as undefined
    })
  
  },[]);
}

我做错了什么？

编辑：

这是我的 routes.js 文件：

const routes = [
  {
    path: 'app',
    element: <DashboardLayout />,
    children: [
      { path: 'account', element: <Account /> },
      { path: 'customers', element: <CustomerList /> },
      { path: 'CustomerDetails', element: <CustomerDetails /> },
      { path: 'ReportDetails', element: <ReportDetails /> },
      { path: 'report', element: <ReportList /> },
      { path: 'freight', element: <FreightList /> },
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'analytics', element: <Analytics /> },
      { path: 'products', element: <ProductList /> },
      { path: 'settings', element: <Settings /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  },
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: 'register', element: <Register /> },
      // { path: '404', element: <NotFound /> },
      { path: '/', element: <Navigate to="/login" /> },
      { path: '*', element: <Navigate to="/app/dashboard" /> }
    ]
  }
];

Answer 1

如果您使用 React >16.8.0 和功能组件，React Router >5.1.0 中有一个新的 useHistory 钩子。 你的 Route 就是这样传递 id 的。

      <Switch>
        <Route exact path="/form" component={Form} />
        <Route exact path="/data/:id" component={Formdata} />
      </Switch>

然后从你想要的位置使用 react-router-dom 中的 useHistory 钩子。

  const HandleSubmit = (e) => {
    e.preventDefault();
    history.push(`/data/${initstate}`);
  };

最后在你想要 id 的地方使用 useParms 钩子来获取 id：

 let params = useParams();
 setUserID(params.id);