Javascript 是否可以在浏览器返回时使用react router dom将状态发送到页面目标？

我正在使用react.js和react路由器dom创建两个页面。Form.js是在表单中输入姓名的页面，Confirmation.js是确认姓名的页面。 我想分享两个班级的情况。因此，当您从链接按钮跳转到另一个页面时，您将同时发送状态。发送状态在类构造函数中作为

this.state=props.history.location.state

接收

许多人省略了这一代码

//Form.js
从“React”导入React，{Component}
从“react router dom”导入{Link}
类形式扩展组件{
建造师（道具）{
超级（道具）；
const histState=props.history.location.state
this.state=histState==未定义？{name:this.state}:histState
}
render（）{
返回(
发送
)
}
}

//Confirmation.js
类确认扩展了组件{
建造师（道具）{
超级（道具）；
this.state=props.history.location.state
}
render（）{
返回(
您的姓名：{this.state.Name}
编辑
)
}
}

现在我可以做我想做的事了。但是，我注意到，当用户按下Confirmation.js页面上的browser back按钮时，状态没有被发送，因为它在没有按下Link组件的情况下跳转到Form.js页面

作为解决方案，我在Confirmation.js中添加了以下代码

//Confirmation.js
组件将卸载（）{
this.props.history.push（“/form”，this.state）
}

但是，当我以这种方式返回浏览器并在类构造函数中接收到状态时，

props.history.location.state

是未定义的。奇怪的是，经过一段时间或重新加载后，

props.history.location.state

被设置为正常状态

//Form.js
建造师（道具）{
...
log（“表单构造函数”、props.history.location.state）
}

---

我想解析将state设置为props.history.location.state的值所需的时间，有解决方案吗？

您可以将基本参数作为路由段传递，如

/form/：username

，也可以使用查询参数，如

/form？username=Hiroaki

，但通过url或位置历史传递更结构化或更复杂的数据似乎是不可取的

我认为使用上下文或设置一个简单的正交存储，在用户导航时跟踪上下文，可以省去很多麻烦

下面是一个你如何利用上下文的草图。假设提供者位于组件层次结构中路由器的上方，表单状态将通过导航（尽管不是通过页面重新加载）保持。（我没有测试过任何代码。这只是给你一个感觉。）

const[formState，setFormState]=useState（{}）；

const Form=（{onChange}）=>{
const formState=useContext（FormStateContext）；
返回(
setFormState（{…formState，用户名：e.target.value}）}
/>
);
}

const Confirmation=（）=>{
const formState=useContext（FormStateContext）；
返回(
您的姓名：{formState.username}
);
}

如果您的组件没有那么大，您可以这样做，而不是使用不同的路径：

import React from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const [state, setState] = React.useState({isConfirmationMode: false});
  const handleChange = e => setState({...state, [e.target.name]: e.target.value});

  const confirm = () => {
    console.log('confirmed');
    // Here send you data or whatever you want
    // then redirect wherever you want, I just display the form again
   setState({...state, isConfirmationMode: false});
  }

  const cancel = () => {
    // juste display the form again
   setState({...state, isConfirmationMode: false});
  }

  const displayForm = () => (
    <div>
      name : <input type="text" name="name" value={state.name} onChange={handleChange} />
      <button onClick={() => setState({...state, isConfirmationMode: true})}>Send</button>
    </div>
  );

  return state.isConfirmationMode ? 
    <Confirmation name={state.name} confirm={confirm} cancel={cancel} /> : 
    displayForm()
};

// Here I created 'confirm' and 'cancel', but you might only need 'cancel'
const Confirmation = ({name, confirm, cancel}) => {
  return (
    <div> 
      Are you {name} ?<br />
      <button onClick={confirm}>Confirm</button>
      <button onClick={cancel}>Cancel</button>

    </div>
  );
}

render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入{render}；
导入“/style.css”；
常量应用=（）=>{
const[state，setState]=React.useState（{isConfirmationMode:false}）；
const handleChange=e=>setState（{…state，[e.target.name]：e.target.value}）；
常量确认=（）=>{
console.log（“已确认”）；
//这里给你发送数据或任何你想要的
//然后重定向到任何你想要的地方，我只是再次显示表单
setState（{…state，isConfirmationMode:false}）；
}
常量取消=（）=>{
//只需再次显示表单即可
setState（{…state，isConfirmationMode:false}）；
}
constdisplayForm=（）=>(
姓名：
setState（{…state，isConfirmationMode:true}）}>Send
);
返回state.isConfirmationMode？
: 
displayForm（）
};
//在这里，我创建了“确认”和“取消”，但您可能只需要“取消”
常量确认=（{name，confirm，cancel}）=>{
返回(
你是{name}吗？

证实
取消
);
}
render（.其思想是根据简单布尔值的状态显示表单或确认（我在另一个组件中分离了确认，但在这里它可能是第一个组件的一部分）

const Form = ({ onChange }) => {
  const formState = useContext(FormStateContext);

  return (
    <input name="username"
      value={formState.username}
      onChange={(e) => setFormState({ ...formState, username: e.target.value })}
    />
  );
}

const Confirmation = () => {
  const formState = useContext(FormStateContext);

  return (
    <div>Your Name: {formState.username}</div>
  );
}

import React from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const [state, setState] = React.useState({isConfirmationMode: false});
  const handleChange = e => setState({...state, [e.target.name]: e.target.value});

  const confirm = () => {
    console.log('confirmed');
    // Here send you data or whatever you want
    // then redirect wherever you want, I just display the form again
   setState({...state, isConfirmationMode: false});
  }

  const cancel = () => {
    // juste display the form again
   setState({...state, isConfirmationMode: false});
  }

  const displayForm = () => (
    <div>
      name : <input type="text" name="name" value={state.name} onChange={handleChange} />
      <button onClick={() => setState({...state, isConfirmationMode: true})}>Send</button>
    </div>
  );

  return state.isConfirmationMode ? 
    <Confirmation name={state.name} confirm={confirm} cancel={cancel} /> : 
    displayForm()
};

// Here I created 'confirm' and 'cancel', but you might only need 'cancel'
const Confirmation = ({name, confirm, cancel}) => {
  return (
    <div> 
      Are you {name} ?<br />
      <button onClick={confirm}>Confirm</button>
      <button onClick={cancel}>Cancel</button>

    </div>
  );
}

render(<App />, document.getElementById("root"));