如何在没有反应路由器的情况下创建新页面答案

【问题标题】：How to create new page without react router如何在没有反应路由器的情况下创建新页面
【发布时间】：2021-01-16 19:44:52
【问题描述】：

我正在创建一个反应项目，我的主页上有一个按钮，当我单击它时，它应该打开一个包含要填写的表单的新页面。因为它是一个表单，它应该只在单击主页上的按钮后出现，所以我不想使用反应路由器，因为我不希望用户只输入“mywebsite.com/form”。我还想要这样的功能，当用户提交表单时，页面然后返回主页，并且表单中的数据应该在主页中可用。例如，如果表单有文本字段、列表、日期选择器等。我希望用户提交表单后主页中的所有数据。

附：我在整个应用程序中使用 material-ui 组件，因此文本字段、日期选择器等都是 mui 组件，因此从这些组件中获取的数据必须符合此要求。

【问题讨论】：

medium.com/@jeswin/…
这只是做与反应路由器相同的事情，期望实现它自己的。如果您查看我的问题，我不想要与反应路由器相同的功能。我想要一个在不更改 url 的情况下显示的页面，并且在该页面上提交的数据应该可用，在提交表单后，重定向到主页后返回主页。
更好的方式，如果它的简单形式，当用户单击按钮时，您可以像这样使用它，例如，您显示表单，然后在提交表单返回 null 这种方式后，您不使用 react-router跨度>

标签： reactjs react-router material-ui

【解决方案1】：

如果我能给出我的意见，我认为您可以为此使用 NextJS 和服务器端渲染。 NextJS 提供了一个名为“pages”的结构化文件夹。您可以将您的页面添加到此。重定向也可以使用下一个包中的路由器来完成。无需任何反应路由器的简单方法。我曾经使用 React Router，直到我发现了这一点。

【讨论】：

嗨，这是一个不错的选择，但它与我明确定义页面（例如：页面/表单）的反应路由器具有相同的功能，这是我想要避免的
@AyushKoul，那么我认为您正在寻找的是一个组件。使用三元条件创建一个单独的组件并仅显示基于状态的组件

【解决方案2】：

在您的 Home 组件中，根据是否单击按钮进行条件渲染。如果是，请渲染您的 Form 组件。理想情况下，您的 Home 组件应该是您的智能组件，而 Form 应该是一个哑组件。这意味着 Home 应该管理所有状态，而 Form 纯粹只是用于视觉效果（UI）。

import React, {useState, useEffect} from 'react';
import myForm from './myForm';

const Home = () => {
  const [isBtnClicked, setIsBtnClicked] = useState(false);
  const [formData, setFormData] = useState(undefined);

  useEffect(() => {
    if(formData){
     setIsBtnClicked(false); // or you can pass this setter to form component and set to false when form is submitted.
    }
  },[formData])

 return (
    <> 
      {isBtnClicked 
         ? <myForm setFormData={setFormData} />
         : (<h2>Home With Button</h2>
            <Button variant="contained" onClick={() => setIsBtnClicked(true)})
       }
};

import React from 'react';
const myForm = ({setFormData}) => {
  //assuming you have refs to all inputs
  const handleFormSubmit = (e) => {
   e.preventDefault();
   // construct form data and call setFormData()
  }

 return (
   <>
    <form onSubmit={handleFormSubmit()}>
     ...
    </form>
   </>
};

【讨论】：

嗨，这实际上是我最初打算做的，但这个问题假设用户想要取消表单而不提交它。大多数人可能会在他们的浏览器中按下后退按钮返回，这在这种情况下不起作用。我仍然可以在表单上添加一个取消按钮，将它们重定向到主页，但仍然存在上述可能性。
@AyushKoul 您可以监听window.popstate 事件并将按钮状态设置回false。
是的，您可以添加window.popstate。但是你不能阻止默认行为。例如，用户从新标签页来到主页。用户按下按钮并打开表单。然后他按下了返回按钮。在这种情况下，用户将被重定向到新标签。

【解决方案3】：

由于您使用的是 material-ui，我建议您使用他们的 Dialog 组件之一。如果您想让它看起来像打开一个完全不同的页面来填写表格，您可以使用他们的full-screen dialog 组件。在此组件中构建您的表单并根据自己的喜好更改道具。当用户单击您主页上的按钮时，有条件地呈现表单。

使用Dialog API 中的fullscreen 属性并添加您需要的其他属性。

【讨论】：