Question

我们在Azure上部署了react应用。我们将动态路由附加到链接上，例如， https://aovstorage.z23.web.core.windows.net/VK-SHOP。这个“ VK-SHOP ”是动态的，可以是任何东西。但是我们收到404页未找到错误。

我们的路由器代码为-

var pathArray = window.location.pathname.split('/');
        this.setState({ ...this.state, path: pathArray[1] })

<Router history={history}>
<div className="tabs">
<section id="page-content" className="page-wrapper">
<Route exact path={`/${this.state.path}`} component={ShopDashboard} />
<Route path={`/${this.state.path}/viewcart`} component={DGShopProductCart} />
<Route path={`/${this.state.path}/product/:id?`} component={DGShopProduct} />

<Route path="/not_found" component={NotFoundShop} status={404} />
</section>
</div>
</Router>

然后，为处理此错误，我们尝试重定向路由

const params = document.location.search.replace（'？redirect ='，''）.replace（'％2F'，''）;

并使用404.html页面处理错误。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>404 Not Found | My App</title>
</head>
<body>
  <script>
    (function redirect() {
      if (document && document.location) {
        document.location.replace(`/?redirect=${encodeURIComponent(document.location.pathname)}`);
      }
    }());
  </script>
</body>
</html>

enter image description here

这适用于Google Chrome浏览器，但不适用于其他浏览器。

感谢您的帮助！

反应动态路由

0 个答案: