Как создать маршрут, например (domain.com/dashboard/products) в React JS

Я новичок в ReactJS. Я хочу составить маршрут, который может понравиться (dashboard/product) . Как это было бы возможно. Я создал, но он не работает должным образом .. может кто-нибудь, пожалуйста, помогите мне. Спасибо .

<div style = {wrapperStyle.MainWrapper}>
      <h1>Dashboard Page</h1>

      <div style = {wrapperStyle.leftSideMenues}>
          <h1>Left Side Menues</h1>
          <div>

          </div>
      </div>
      <Router>
              <Switch>
                  <Route path='/' exact component= {Dashboard}/>
                  <Route path='/dashboard/:organizationContact' component = {OraganizationContacts}/>
                  <Route path='/dashboard/products' component = {Products}/>
                  <Route path='/sales' component = {Sales}/>
                  <Route path='/purchase_orders' component = {PurchaseOrders}/>
                  <Route path='/shipment' component = {Shipments}/>
                  <Route path='/everything' component = {Everything}/>
                  <Route path='/reports' component = {Reports}/>
                  <Route path='/settings' component = {Settings}/>
                  <Route path='/logout' component = {LogOut}/>
                  <Route component = {NotFound}/>
              </Switch>
          </Router>
  </div>

Вы можете посмотреть на stackoverflow.com/questions/41474134/…

Subhendu Kundu 02.03.2019 16:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете изменить порядок маршрутов следующим образом:

<Route exact path='/dashboard/products' component = {Products}/>
<Route exact path='/dashboard/:organizationContact' component = {OraganizationContacts}/>

Вы хотите сказать, что я должен добавить exact ко всем маршрутам?

user11037643 02.03.2019 16:47

Да, в react-router4 маршруты сопоставляются с использованием регулярных выражений, поэтому добавление exact соответствует точному маршруту.

Umair Farooq 02.03.2019 16:48

Например, в маршруте. Если пользователь нажмет dashboard/user, я просто хочу отобразить User данные компонента. Теперь он показывает данные обоих компонентов. Как избежать данных компонента приборной панели?

user11037643 02.03.2019 16:57

Если маршрут dashboard/user, согласно маршрутам он должен идти к компоненту OraganizationContacts

Umair Farooq 02.03.2019 16:59

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