Маршрутизатор React не показывает '/' как домашний, когда я добавляю свойство домашней страницы в пакет json для страниц github

Question

Когда я развернул свое приложение для реагирования на страницы github, я получил только myusername.github.io/ в качестве домашнего компонента вместо myusername.github.io/project в качестве домашнего компонента, который является ссылкой, которую дает мне github. После некоторого покопания я обнаружил, что виноват реагирующий маршрутизатор. Я пробовал process.env.PUBLIC_URL, но он не работает. Компонент My App:

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. Вам также не нужно повторять базовый URL в компонентах Route. Вы сможете избавиться от компонента 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;