ReactJS — проблема с react-router-dom

У меня есть компонент <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>
)

Чтобы сделать это, вы должны сделать это с помощью рендеринга на стороне сервера или также называемого изоморфным.

vitomadio 03.03.2019 19:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
234
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

что это такое? hashРоутер? какая-то зависимость? не могли бы вы объяснить мне, как мне это реализовать

claudiopb 03.03.2019 19:49

Описание и примеры есть в официальной документации reacttraining.com/react-router/web/api/HashRouter

nucleartux 03.03.2019 19:51

Я сделал тест, заменив /#/billingCycles на /billingCycles, и это не сработало, появилось сообщение об ошибке: Cannot GET /billingCycles в этом URL-адресе локальный хост: 8080/биллингциклы

claudiopb 03.03.2019 19:55

Я сделал для вас небольшой пример: codeandbox.io/s/j22067pw03?fontsize=14. Вы можете изменить URL-адрес на /#/billingCycles, и маршрут изменится.

nucleartux 03.03.2019 20:09

Другие вопросы по теме