时间戳

首页 > 解决方案 > 反应路由器不适用于现场生产

javascript - 反应路由器不适用于现场生产

问题描述

我用 create-react-app 构建了一个 UI amazon-clone，它只显示虚拟数据。问题是在将其发布到 Vercel 后，路由无法按预期工作！单击链接后，您会看到一个空白页面“URL 参数正确”，您必须手动重新加载页面才能工作！此外，如果您单击一个按钮，则没有事件触发，您会得到一个空白页面！

我将所有路由都包装到 MainRoute 组件：

const MainRoute = withRouter(({ location }) => {
return (
<>
  {location.pathname !== "/login" && location.pathname !== "/signup" ? (
    <Header />
  ) : null}
  <Switch>
    <Route exact path="/" render={() => <Home />} />
    <Route exact path="/products" render={() => <Products />} />
    <Route
      exact
      path="/products/:productID"
      render={() => <ProductPage />}
    />
    <Route path="/checkout" render={() => <Checkout />} />
    <Route path="/payment" render={() => <Payment />} />
    <Route path="/login" render={() => <Login />} />
    <Route path="/signup" render={() => <Signup />} />

    <Route render={() => <NotFoundPage />} />
  </Switch>
  {location.pathname !== "/login" && location.pathname !== "/signup" ? (
    <Footer />
   ) : null}
 </>
 );
});

 export default withRouter(MainRoute);

我的应用组件：

function App() {

return (
 <div className="app_wrapper">
  <Router>
    <MainRoute />
  </Router>
  </div>
 );
 }

export default App;

回购 https://github.com/aseelban/amazon-clone-app 链接： https ://amazon-clone-app-llyl1tfcn.vercel.app/

标签： javascriptreactjsreact-routermaterial-uivercel

解决方案

它(under Brave browser)在身份验证路由中正常工作，您能否指定问题发生的路由。！

推荐阅读