Question

我正在使用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/

任何人都可以建议路径应该如何显示，以便它在部署时有效吗？

Answer 1

您可以在路由器中使用basename道具，只需确保您只在生产中使用它而不是在开发中（您可以使用环境变量），您的路由器应如下所示：

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

如果你正在使用create_react_app，你可以像这样使用env变量process.env.PUBLIC_URL（这对于开发是空的，所以它适用于bot dev和production）：

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

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

Answer 2

这是一个简单的修复程序，我在这里遇到了相同的问题。

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

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

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

此后，您的网站应该以相同的方式工作。

部署后反应路由器URL问题

2 个答案: