如何在服务器上设置React App，以便我有自己想要的链接？

Question

我使用一个教程制作了一个React WebShop进行测试，并希望将其集成到我的网站中进行测试，但是不幸的是，每次这样做，该应用程序都会混乱。意味着链接没有意义。 例如，如果我输入mywebsite.com/Shop，我希望显示商店。但是，当我进入应用程序所在的目录（位于上面的地址）时，我获得了错误代码404的默认组件，而不是产品概述。

对不起，但是我无法真正解释我的意思。

Git：https://github.com/Arborem123/webshop

Answer 1

当前，您的路由设置如下：

<Switch>
  <Route exact path="/" component={ProductList} />
  <Route path="/details" component={Details} />
  <Route path="/cart" component={Cart} />
  <Route component={Default} />
</Switch>

没有/shop路径暴露给路由器，因此当Default穿过Switch时，它将最终渲染您的/shop组件，而没有匹配任何其他路径。如果要公开Switch路线，则需要将<Switch> <Route path="/shop" component={ProductList} /> <Route path="/details" component={Details} /> <Route path="/cart" component={Cart} /> <Route exact path="/" component{HomePage} <Route component={Default} /> </Switch> 更改为以下形式：

/

您会发现我将您的基本路由HomePage更改为指向我知道您尚未实现的data.frame组件。只是作为如何完成路由设置的示例。