获取后导航到 React 组件中包含数据的另一个页面答案

【问题标题】：Navigate to another page with data in a React Component after fetch获取后导航到 React 组件中包含数据的另一个页面
【发布时间】：2022-01-09 15:04:51
【问题描述】：

我是 React + typescript 的新手，正在尝试使用“react-router-dom”来制作登录组件以与我的后端服务器进行通信。

基本上，我正在尝试创建一个“登录”类，在提交表单时，它将触发对我的服务器的获取请求。如果我的服务器响应正常，我将导航到包含输入数据的另一个页面。

在我尝试导航到第二页之前，一切正常。问题是，我不希望登录凭据出现在 url 中，并且钩子规则阻止我在检查我的获取响应的状态代码后使用导航钩子。

有人知道我如何实现这一目标吗？任何帮助将不胜感激。

编辑：添加当前代码

interface MyProps{
}
interface MyStates{
  username: string,
  password: string
}

class Modal extends React.Component<MyProps, MyStates>{
  constructor(props: MyProps){
    super(props);
    this.state = {username: '', password: ''};

    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleLoginSubmit = this.handleLoginSubmit.bind(this);
  }

  handleUsernameChange(event: React.ChangeEvent<HTMLInputElement>) {
    this.setState({username: event.target.value});
  }

  handlePasswordChange(event: React.ChangeEvent<HTMLInputElement>) {
    this.setState({password: event.target.value});
  }
  
  handleLoginSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    var request = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: this.state.username, password: this.state.password})
    }
    fetch('login',request)
    .then(response => {
      if(!response.ok) throw new Error(response.statusText);
      else {
//        window.location.replace('/AfterLogin.html?name=' + this.state.username)
      }
    })
  }
  render(){
    return <div className='Modal'>
          
            <form onSubmit= { this.handleLoginSubmit }>
              <label>
                Username
              <input type='text' name='username' value={this.state.username} onChange={this.handleUsernameChange} />
              </label>
              <p/>
              <label>
                Password
              <input type='password' name='password' value={this.state.password} onChange={this.handlePasswordChange} />
              </label>
              <p/>
              <button> Sign In</button>
            </form>
          
        </div>
  }
}

【问题讨论】：

请分享一个代码示例，说明您正在尝试做什么。帮助调试我们看不到的代码几乎是不可能的。 stackoverflow.com/help/minimal-reproducible-example
您希望 URL 如何显示？您需要将this.state.username 发送到下一页吗？这个Modal 组件是否接收到任何路由道具？换句话说，它是由Route 渲染还是用withRouter HOC 装饰以传递history 对象以用于导航？
基本上我想制作一个 React 组件，它可以将登录凭据传递到另一个页面，而不会出于安全原因将其显示在 URL 中。我可以使用任何外部组件，但不确定最流行的方式是什么
当然，你可以通过路由状态发送。您使用的是哪个版本的react-router？从你的项目目录运行npm list react-router react-router-dom。
所以这不是您的应用正在呈现的路线吗？如果它是一个单独的网页，那么您不能使用您的 React 应用程序的路由来发送数据。你可能会发现这个SO post/answer很有用/有帮助。

标签： javascript reactjs typescript react-router

【解决方案1】：

你可以使用来自 react router dom 的 useNaviate() 钩子。

const navigation = useNavigate()
// OnLogin Successfully
navigation("/home",{state :{ name : "raeon"}, replace:true})

您需要传递两个参数。第一个是您要导航到的链接。在第二个参数中，您必须传递带有键 replace 和“状态”的对象。对此作出更多反应：https://reactrouter.com/docs/en/v6/api#usenavigate

【讨论】：