如何解决React Github页面react-router路由查询参数
我正在尝试创建自己的页面,路由遇到麻烦。
由于该页面将被加载到Github
上,因此其地址将如下所示:
nameUser.github.io/nameProject
该站点有几页,现在考虑两页,我们将它们分别称为“ page1
”和“ page2
”。
如果您使用这样的路由:nameUser.github.io/nameProject/pageNumber
要访问其中一个页面,Github
给出错误。
所以我选择了将页面作为参数传递的路由。
我将有这样的地址:nameUser.github.io/nameProject/?page=pageNumber
我想实现的是这样:
nameUser.github.io/nameProject -> page1
nameUser.github.io/nameProject/ -> page1
nameUser.github.io/nameProject/?page= -> page1
nameUser.github.io/nameProject/?page=page1 -> page1
nameUser.github.io/nameProject/?page=page2 -> page2
nameUser.github.io/nameProject/?page=page5 -> pageError or page1
链接:codesandbox
这是用于打印引用页面的代码:
{routeObj.map(({ path,obj },key) => {
if (path.includes(page)) {
return obj;
} else return <div>No found</div>;
})}
但这不是很正确,原因是:
- 不要认为该页面不存在。
- 它执行不必要的循环,即使在第一次迭代中找到该页面时,它也会继续进行所有可能的循环。 您也可以在我发布的示例中看到它。
我尝试使用<Switch>
和<Route>
,但无法使它们正常工作。
在codesandbox上,当我单击页面时,它还会给我带来其他问题,这些问题通常是我在本地无法解决的。
你能帮我吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。