当我将主页属性添加到 github 页面的包 json 时，React 路由器不显示“/”作为主页答案

【问题标题】：React router doesn't show '/' as home when i add homepage property to package json for github pages当我将主页属性添加到 github 页面的包 json 时，React 路由器不显示“/”作为主页
【发布时间】：2020-10-06 19:13:55
【问题描述】：

当我将我的 react 应用程序部署到 github 页面时，我只将 myusername.github.io/ 作为 home 组件，而不是 myusername.github.io/project 作为 home 组件，这是 github 给我的链接。经过一番挖掘，我发现罪魁祸首是反应路由器。我试过process.env.PUBLIC_URL 但它不起作用。我的应用组件：

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <ScrollToTop>
      <GlobalStyles />
      <Header />
      <BurgerMenu />
      <Switch>
      <Route exact path={process.env.PUBLIC_URL + '/'} component={Home} />
      <Route path='/plants-accessories' component={LivePlants} />
      <Route exact path='/checkout' component={Checkout} />
      </Switch> 
    </ScrollToTop>
    </Router>
  )
}

export default App;

索引：

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
    <PersistGate persistor={persistor} >
    <App />
    </PersistGate>
    </BrowserRouter>
    </Provider>,
  document.getElementById('root')
)

【问题讨论】：

到底发生了什么，你期待什么？

标签： javascript reactjs react-router router

【解决方案1】：

尝试在BrowserRouter 路由组件上设置basename 属性。您也不需要在 Route 组件中重复基本 URL。您应该能够摆脱Router 组件，因为您已经在使用BrowserRouter。

index.js

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter basename={process.env.PUBLIC_URL}>
    <PersistGate persistor={persistor} >
    <App />
    </PersistGate>
    </BrowserRouter>
    </Provider>,
  document.getElementById('root')
)

app.js

function App() {
  return (
      <ScrollToTop>
      <GlobalStyles />
      <Header />
      <BurgerMenu />
      <Switch>
      <Route exact path='/' component={Home} />
      <Route path='/plants-accessories' component={LivePlants} />
      <Route exact path='/checkout' component={Checkout} />
      </Switch> 
    </ScrollToTop>
  )
}

export default App;

【讨论】：