如何允许用户保存输入以供进一步审查

Question

我做了一个小型计算网站，我希望经过身份验证的用户保存他/她的计算。

概述：
我有一个包含 8 个输入字段和几个显示结果信息的标签/图表的主页。每当您更改其中一个输入时，标签和图表都会通过钩子更新。

目标：加载数据
我做了一个“保存”按钮，点击它时：

• 将所有输入保存到 firebase（这已经很好了）
• 在 /myaccount/dashboard 中创建一个链接，该链接会将您重定向到包含您保存的输入的主页（我需要帮助）

我很难在网上找到资源。但是，在寻找响应式计算网站时，我遇到了这个：https://optionstrat.com
即使我不知道他们在计算什么，它会满足我的需求，即：您可以“保存交易”，然后转到显示所有已保存交易的帐户。

有没有人知道一个很好的教程如何做到这一点？

谢谢你:)

编辑
这是我在 App.js 中的保存功能：

function Savecalc(){
  const calcRef = db.ref("User_"+auth.currentUser.uid);
  const newCalc = calcRef.push();
  newCalc.set({inputs:{a,b,c},outputs:{x,y}});
/* Then attribute an URL to a saved calculation*/
}

然后，在我的 Dashboard.js 中，我会：

const db=app.database();
export default function Dashboard() {
/* getting the user calculations */

return (
<div>
<!-- Mapping of the user's calculations -->
</div>
)

Answer 1

我怀疑您可能正在寻找一个名为react-router-dom 的小库。这个库本质上提供了一系列导航组件，您可以使用这些组件在您的应用程序中导航。这是一个基本的example。将其安装到项目中后，您应该创建一个单独的 AppRouter.js 文件，该文件可能类似于以下内容：

import React from 'react';
// Install the react-router-dom package
import { Router, Route, Switch } from 'react-router-dom';
// Further install the history package
import { createBrowserHistory } from 'history'; 
// Import your dashboard component and all other components you wish to create a route to
// This is just an example
import HomePage from '../components/Homepage';
import Dashboard from '../components/Dashboard';
// You will need to create a Page Not Found component that redirects when a wrong URL is inserted
import NotFoundPage from '../components/NotFoundPage';

export const history = createBrowserHistory();

const AppRouter = () => (
  <Router history={history}>
    <Switch>
      <Route path='/' component={HomePage} exact={true} />
      <Route path='/myaccount/dashboard' component={Dashboard} />
      <Route component={NotFoundPage} />
    </Switch>
  </Router>
);

export default AppRouter;

然后在您的 main/app.js 文件中，您需要添加 AppRouter 组件。它应该看起来像这样：

const Application = () => (
  <Provider store={store}>  // if using react-redux, otherwise ignore Provider
      <AppRouter />   
  </Provider>
);

ReactDom.render(<Application />, document.getElementById('app'));

您还可以创建公共和私有路由（例如，只有登录用户才能访问）。这些例子可以在here找到。

Answer 2

如果您要保存用户的计算，然后您可以在您想要显示它们的任何页面上查询它们，例如/myaccount/仪表板。

然后您可以映射它们并将它们作为链接显示在 UI 中，其中链接可能类似​​于 /myaccount/dashboard/YlxIJ2zOxI9KYJ5Dag6t，其中 YlxIJ2zOxI9KYJ5Dag6t 是 Firestore 自动生成的文档 ID。

假设您使用的是 React Router，那么您可以拥有如下路由：

<Route exact path="/myaccount/dashboard/:id">

在此页面上，您可以使用 React Router 的 useParams 挂钩从参数中获取文档的 ID，如下所示：

const { id } = useParams();

然后您可以在useEffect中查询具体计算的信息，并根据需要显示它们。

如果这是您需要的，或者您在任何步骤中需要更多帮助，请告诉我！