反应路由器与动态路由在浏览器直接链接上给出404 [英] react router with dynamic routes give 404 on a browser direct link

问题描述

我有一个 React 前端连接到 Wordpress API ，路由在客户端定义为 React Router 。当我使用链接将它们引导到动态路线时，它们可以正常工作。但是，当我使用浏览器地址栏直接访问链接按Enter键，或者我刷新.i获取

I have a React Front-end connected to Wordpress API and the routes are defined in clientside with React Router. When i use Link to direct them to dynamic routes they work fine. But when i use browser address bar directly to access the links pressing enter, or i refresh.i get

404页面未找到

404 page not found

我知道这是因为直接调用服务器并且没有 javascript 当我们有 PHP服务器时，操作共享主机上的 react-router 操作。

and i got to know that is because a direct call to server is happening and the there's no javascript to manipulate the react-router actions on the shared host when we have a PHP Server on that.

想到 react-snapshot 但它不适合API的动态特性。请允许任何我给的人解决这个问题的可能方法？

Thought about react-snapshot but its not going to suit the dynamic nature from the API.Please can anyone i give a possible way to go around this issue?

推荐答案

检查出来： https://github.com/rafrex/spa-github-pages

这个概念可能对你有帮助。

The concept might help you.

当GitHub Pages服务器获得对使用前端路由定义的路径的请求时，例如example.tld / foo，它返回一个自定义的404.html页面。自定义404.html页面包含一个脚本，该脚本获取当前URL并将路径和查询字符串转换为查询字符串，然后将浏览器重定向到仅包含查询字符串和哈希片段的新URL。

When the GitHub Pages server gets a request for a path defined with frontend routes, e.g. example.tld/foo, it returns a custom 404.html page. The custom 404.html page contains a script that takes the current url and converts the path and query string into just a query string, and then redirects the browser to the new url with only a query string and hash fragment.

这篇关于反应路由器与动态路由在浏览器直接链接上给出404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！