部署后反应路由器 url 问题

Posted 2023-02-21

【中文标题】部署后反应路由器 url 问题

【英文标题】：react router url issues after deployment

【发布时间】：2018-05-16 00:36:27

【问题描述】：

我正在使用 React 路由器来更改路由。这在我本地开发时效果很好。

我的路由器代码如下所示，一切正常。

<Router>
    <Route exact path="/" render=(routeProps)=> <Homepage ...routeProps />/>
    <Route path="/graph" render=(routeProps)=> <AboutPage ...routeProps />/>            
</Router>

我遇到的问题是当我将它部署到我的 github 页面时，http://exampleuser.github.io/react-project。

由于项目位于 react-project 文件夹中，因此 "/" 指的是 http://exampleuser.github.io/ 的实际路线

任何人都可以建议路径的外观，以便在部署时可以正常工作吗？

【问题讨论】：

您尝试过使用<Switch> 吗？ import <Switch> from 'react-router-dom' 然后将所有内容包装在 <div> 中，然后将所有 <Route> 包装在 <Switch> 中

我有，但我认为这与 Switch 无关 - 我相信一旦我部署后它与路线有关，因为它不再是 "/"

把"/"<Route>放在最后而不是第一个？

你是否有机会使用 create react 应用程序？

@randomguy04 我是

【参考方案1】：

你可以在你的路由器中使用basename prop，只要确保你只在生产而不是在开发中使用它（你可以为此使用环境变量）你的路由器应该如下所示：

<Router basename="your-react-project">
  /* routes */
</Router>

如果您使用的是 create_react_app，则可以像这样使用环境变量 process.env.PUBLIC_URL（在开发中它是空的，因此它适用于机器人开发和生产）：

<Router basename=process.env.PUBLIC_URL>
  /* routes */
</Router>

我实际上有一个project running 使用这种配置并且工作得很好。

【讨论】：

所以当它是我的 github 存储库根目录下的项目时它实际上工作正常，但它位于子文件夹中，即 - http://exampleuser.github.io/react-project

您尝试过第一种方法吗？在哪里可以手动设置基本名称？

是的，伙计，刚刚部署到那里就可以了！垒手是一种享受！绿勾出现！附带问题，你在哪里设置 process.env.PUBLIC_URL 变量？

很高兴听到这个消息。您不必自己设置，他们在这里简要解释了它的工作原理github.com/facebookincubator/create-react-app/blob/master/…

【参考方案2】：

这是一个简单的解决方法，我在这里遇到了同样的问题，我是如何解决的。

1- 如果您使用的是 apache，请转到 cPanel 或服务器中的根目录。并创建一个 .htaccess 文件

打开文件并添加以下代码。

#jerryUrena is awesome RewriteEngine on RewriteCond %REQUEST_FILENAME !-f RewriteCond %REQUEST_FILENAME !-d RewriteRule . /index.html [L]

在此之后，您的网站应该以相同的方式运行。