使用 React Link 并传递状态时页面不会刷新答案

【问题标题】：Page wont refresh when using React Link and passing state使用 React Link 并传递状态时页面不会刷新
【发布时间】：2020-06-05 02:07:51
【问题描述】：

我刚刚开始在 React 中使用 Router、Link 和所有这些东西。在我的主 App.js 文件中，我有 Router 标记，其中包含两个 Route，如下所示：

<Router>
  <Route exact path="/" component={Intro} />
  <Route path="/ChatRoom" component={ChatRoom} />
</Router>

然后，在我的 Intro.js 文件中，我使用一个链接标签进入我的聊天室。我是这样做的：

   <Link to={{pathname: `/ChatRoom`, state: {name: name}}}>
        <input type="submit" value="Submit" />
   </Link>

顺便说一句，提交按钮只是一个将我带到下一页的按钮。

一切正常，这意味着我的介绍页面上的提交按钮将我带到了聊天室。但是，然后我将路径名更改为在其中包含参数，就像这样

<Link to={{pathname: `/ChatRoom?name=${name}`, state: {name: name}}}>
        <input type="submit" value="Submit" />
   </Link>

{name} 是状态的一部分，我只是希望它出现在 URL 中。现在，当我点击提交按钮时，页面完全是空白的，但如果我刷新页面，一切都会出现。为什么要这样做？

附：如果我删除链接的状态部分并说

to={pathname: `/ChatRoom?name=${name}`}

它工作得很好。这似乎是状态和 URL 参数组合的错误。

【问题讨论】：

不能在表单中使用method="GET"？
嘿@Dominik，你这是什么意思？对不起，我是初学者
听起来您想将表单提交到另一个页面并希望该表单的值出现在 url 中。这就是GET 方法在表单中的作用。你这里用的是什么路由器？反应路由器？如果是这样，请查看文档：reacttraining.com/react-router/web/example/url-params
@Dominik 啊，是的，谢谢。问题是，如果我不通过链接传递状态，它实际上可以按照我编写的方式正常工作。只有当我也使用 Link 标签和路径名传递状态时，它才会中断
确实是因为您没有指定参数。检查我发送的链接

【解决方案1】：

我最终找到了解决方案。

我所要做的就是为链接添加搜索参数：

<Link to={{
            pathname: '/ChatRoom',
            search: `?name=${name}`,
            state: {name: name}
          }}>

将路径名和后面的查询字符串分开！

【讨论】：