[当我将主页属性添加到github页面的json包时，反应路由器不会将'/'显示为主页

Question

[当我将我的应用程序部署到github页面时，我仅将myusername.github.io/作为家庭组件，而不是将myusername.github.io/project作为家庭组件，这是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')
) 

Answer 1

尝试在basename路线组件上设置BrowserRouter道具。您也不需要在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;