У меня есть компонент <Routes>, который отображает только компонент <Dashboard>. То же самое не происходит, когда я пытаюсь получить компонент <BillingCycle>. Содержимое Billing Cycles не отображается, когда я ввожу в браузере URL-адрес, который может получить страницу BillingCycle. Продолжается показ содержимого информационной панели. Что я ошибаюсь? Спасибо.
импортировать '../общий/шаблон/зависимости' импортировать React из «реагировать»
вот родительский компонент, который импортирует компонент Routes.
import Routes from './Routes'
export default (props) => (
<div className='wrapper'>
<div className='content-wrapper'>
<Routes />
</div>
</div>
)
вот компонент Dashboard, который успешно отображается в этих URL-адресах: http://локальный:8080 и http://локальный:8080/#/
import React from 'react'
export default props => (
<div>
<h1>Dashboard</h1>
</div>
)
вот компонент billingCycle, который не появляется, когда я ввожу его URL-адрес: http://локальный:8080/#/биллингциклы
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} />
что это такое? hashРоутер? какая-то зависимость? не могли бы вы объяснить мне, как мне это реализовать
Описание и примеры есть в официальной документации reacttraining.com/react-router/web/api/HashRouter
Я сделал тест, заменив /#/billingCycles на /billingCycles, и это не сработало, появилось сообщение об ошибке: Cannot GET /billingCycles в этом URL-адресе локальный хост: 8080/биллингциклы
Я сделал для вас небольшой пример: codeandbox.io/s/j22067pw03?fontsize=14. Вы можете изменить URL-адрес на /#/billingCycles, и маршрут изменится.
Чтобы сделать это, вы должны сделать это с помощью рендеринга на стороне сервера или также называемого изоморфным.