javascript - 部署后 react 路由器 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//p>

任何人都可以建议路径应该如何显示才能在部署时正常工作吗？

Answer 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使用此配置并且工作正常。