Блог

У меня есть <Routes> компонент, который отображает только <Dashboard> компонент. То же самое не происходит, когда я пытаюсь извлечь <BillingCycle> компонент. Содержимое циклов выставления счетов не отображается, когда я набираю URL-адрес в браузере, который может вызвать страницу BillingCycle. Содержимое панели мониторинга продолжает отображаться. В чем я ошибаюсь? Спасибо.

импортируйте ‘../common/template/dependencies’ импортируйте React из ‘react’

вот родительский компонент, который импортирует компонент Routes.

 import Routes from './Routes'

    export default (props) => (
      <div className='wrapper'>  
        <div className='content-wrapper'>
         <Routes />
        </div>
      </div>
    )
  

вот компонент панели мониторинга, который успешно отображается в этих URL: http://localhost:8080 и http://localhost:8080 /#/

 import React from 'react'

export default props  => (
  <div>
    <h1>Dashboard</h1>
  </div>
)
  

вот компонент billingCycle, который не отображается, когда я набираю его URL:
http://localhost:8080/#/billingCycles

 import React from 'react'

export default props => {

  return (
   <h1>Ciclo de pagamentos</h1>
  )
}
  

Вот компонент Routes:

 import React from 'react'
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

import Dashboard from '../dashboard/Dashboard'
import BillingCycle from '../billingCycle/BillingCycle'

export default props => (
  <Router>
    <Switch>      

      <Route exact path='#/billingCycles' component={BillingCycle} />
      <Route exact path='/' component={Dashboard} />
      <Redirect from='*' to='/' />
    </Switch>
  </Router>
)
  

Если вы хотите использовать хэш в URL, вы должны использовать HashRouter . И вы не должны добавлять хэши к маршрутам:

 <Route exact path='/billingCycles' component={BillingCycle} />