使用React Link和传递状态时页面不会刷新

Question

我刚刚开始使用Router，Link和React中的所有这些东西。在我的主要App.js文件中，我有带有两个Route的Router标记，它们看起来像这样：

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

然后，在我的Intro.js文件中，我正在使用链接标记转到我的ChatRoom。我是这样的：

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

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

一切正常，这意味着“简介”页面上的“提交”按钮将我带到ChatRoom。但是，然后我将路径名更改为包含参数，就像这样

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

{name}是状态的一部分，我只希望它出现在URL中。现在，当我单击“提交”按钮时，页面完全空白，但如果我刷新页面，则会显示所有内容。为什么这样做？

P.S。如果我删除链接的状态部分，然后说

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

它完全正常。状态和URL参数组合在一起似乎是一个错误。

Answer 1

我最终想出了解决办法。

我所要做的就是这样添加Link的搜索参数：

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

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