【发布时间】：2021-01-21 12:37:35
【问题描述】：
我已经使用 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/
【问题讨论】：
-
/checkout路由是否在您的本地计算机上完美运行？这个问题只发生在生产环境中吗？ -
不幸的是只有 /login 和 /singup 工作！其余的没有。是的，在 localhost 上一切正常
-
你不需要使用
withRouter，你可以使用useHistory钩子来访问history对象。我认为这可能是个问题。 -
检查reactrouter.com/web/api/Hooks/usehistory 以了解如何以及在何处使用
useHistory。仅在需要访问history对象时使用useHistory，不需要在不需要访问history对象的那些组件（功能性）中使用它。
标签： javascript reactjs react-router material-ui vercel