ReactJS没有路由匹配的位置，因为查询字符串中有问号

Question

你好，我有一个react应用程序与此路由，我使用react-router-dom。

& lt;路由路径= '/联系人吗?Page =: Page ' element={}/>

我像这样导航:

navigation (/contacts?page=${newPage});

但由于问号，在控制台中出现"No routes matched location"，当我用其他符号更改问号时，例如_ everything is fine。

你知道如何解决这个问题吗?

Answer 1

对于这个

有两个解决方案解决方案1

你可以尝试使用这样的参数

<Route path="/contacts/page/:page" component={} />

像这样导航

navigate(/contacts/page/${newPage});

解决方案2

如果你想使用带有问号的查询字符串，你不必在你的文件中提到它，只需添加查询字符串(?页)，然后像我在这个例子中所做的那样访问它

例子

<Route path='/contacts' element={} />

以相同的方式在页面之间导航

navigate(/contacts?page=${newPage});

但是你必须像这样访问页面查询字符串

import {useLocation} from "react-router-dom";
const location = useLocation();
console.log(location);
return (
<div>
<h1>Page</h1>
<p>{new URLSearchParams(location.search).get('page')}</p>
</div>

希望这有帮助，但我建议使用第一个解决方案