部署后反应路由器 url 问题

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在你的路由器中使用prop，只要确保你只在生产中而不是在开发中使用它（你可以使用环境变量）你的路由器应该是这样的：

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

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

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

我实际上有一个使用此配置运行的项目并且工作正常。