Компонент не отображается с использованием react-router v5

В настоящее время я работаю над веб-приложениями панели управления проектами reactjs. Я также использую реактивную маршрутизацию для навигации по контенту на веб-сайте.

У меня есть такое веб-приложение.

Когда я нажимаю «Панель инструментов» на боковой панели, содержимое отображается правильно. Также, когда я нажимаю «Antrian Pasien» на боковой панели.

Но когда я нажимаю «Ke Form» внутри контента или страницы «Antrian Pasien». он не отображает следующий компонент. [![

(https://i.stack.imgur.com/mvjgs.png )]( https://i.stack.imgur.com/mvjgs.png)

я хочу изменить содержимое внутри страницы. не только в сайдбаре. вот моя версия из веб-приложения: реагировать : 16 Реакция-маршрутизатор-дом: 5.3.0

Из кода index.js:

// import resources and library
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

// import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './assets/scss/style.css';
import './index.css';

// Import Page
import Login from './pages/AuthPage/Login';
import Register from './pages/AuthPage/Register';
import App from './App';


// Import Component


// mapping route
const routing = (
  <Router>
    <Route exact path='/' component = {App}/>
    <Route exact path='/login' component = {Login}/>
    <Route exact path='/register' component = {Register} />
  </Router>
)

ReactDOM.render(routing, document.getElementById('root'));


Приложение.js:

import React, { useState } from 'react';
import { Route, Switch , NavLink, HashRouter, useRouteMatch, BrowserRouter as Router, Redirect, Link, Routes } from 'react-router-dom';

import './index.css';
import ImgLogo from './assets/images/img-logo.png';
import { Container } from 'react-bootstrap';

import Dashboard from './pages/Dashboard/Dashboard';

import Registration from './pages/Registration/Registration';

import Footer from './component/Footer';
import NavigationBar from './component/Navbar';
import styled from 'styled-components';
import Forms from './component/Registration/forms/Forms';

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>Dashboard</div>,
        main: () => (
            <>
                <Dashboard/>
            </>
        )
    },
    {
        path: '/antrian-pasien',
        sidebar: () => <div>Antrian Pasien</div>,
        main: () => 
                <>
                    <Registration/>
                </>
    },
    {
        path: '/antrian-pasien/form-antrian-pasien-baru',
        exact: true,
        sidebar: null,
        main: () => <> <Forms/> </>
    }
]

// Sidebar

const LogoIcon = styled.div`
  margin-left: 1rem;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 10px;
`;

const SidebarNav = styled.div`
  background: #fff;
  color: #000;
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
 
  overflow-y: auto;
`;

const SidebarWrap = styled.div`
  width: 100%;
  color: #000;
`;

// Main Content 
const Wrapper = styled.div` 
    display: flex;
`;

const ContentWrapper = styled.div`
    background-color: #f8f9fc;
    width: 100%;
    overflow-x: hidden;
`;

const Content = styled.div` 
    flex: 1 0 auto;
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
`;

const App = () => {
   return (
    <>
        <Router>
            <Wrapper>
                <div style = {{fontSize: '10px'}}>
                    <SidebarNav>
                    <LogoIcon>
                    <img src = {ImgLogo} alt = "Gambar Logo Siklus Care"></img>
                    </LogoIcon>

                    <SidebarWrap>
                        <ul>
                            <li>
                                <Link to = "/">Dashboard</Link>
                            </li>
                            <li>
                                <Link to = "/antrian-pasien">Antrian Pasien</Link>
                            </li>
                        </ul>
                    </SidebarWrap>
                    </SidebarNav>
                </div>
                <Switch>
                        {routes
                            .filter(({ sidebar }) => !!sidebar)
                            .map((route, index) => (
                                <Route
                                    key = {index}
                                    path = {route.path}
                                    exact = {route.exact}

                                />
                            ))}
                </Switch>
                <ContentWrapper>
                        <Content>
                            <NavigationBar/>
                                <Switch> 
                                    {
                                        routes.filter(({ main }) => !!main)
                                        .map((route, index) => (
                                            <Route key = {index} path = {route.path} exact = {route.exact} children = {<route.main/>} />
                                        ))
                                    }    
                                </Switch>     
                        </Content>
                    </ContentWrapper>
            </Wrapper>
        </Router>                            
    </>
   )
}

export default App;

Регистрация.js

import React from "react";
import { Link } from "react-router-dom";
import { Container } from "react-bootstrap";
import GridTwoColumnStart from "../../component/Registration/GridTwoColumnsStart";
import GridTwoColumnsNotEqual from "../../component/Registration/GridTwoColumnsNotEqual";
import GridFullColumn from "../../component/Registration/GridFullColumn";

const Registration = () => {
    return (
        <div>
            <Link to = "/antrian-pasien/form-antrian-pasien-baru">Ke Form</Link>
            <Container>
                    <h4>Registration</h4>
                        <GridTwoColumnStart/>
                        <GridTwoColumnsNotEqual/>
                        <GridFullColumn/>
            </Container>
        </div>
    )
}


export default Registration;

Я понятия не имею, любая помощь будет оценена. Спасибо.

Поведение ключевого слова "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
0
273
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблемы

  1. Компонент App отображается на точном пути "/", поэтому, когда путь URL отличается от "/", App размонтируется, и любые дочерние маршруты не будут монтироваться для сопоставления.
  2. Компонент App рендерит другой Router, вложенный во внешний главный маршрутизатор. Это означает, что любые действия маршрутизации/навигации, которые обрабатываются внутренним вложенным маршрутизатором, не будут известны главному внешнему маршрутизатору. Для каждого приложения должен быть только один маршрутизатор, обеспечивающий контекст маршрутизации.

Решение

  1. Измените порядок корневых маршрутов и визуализируйте их в компонент Switch в порядке, обратном специфичности пути, и удалите реквизит exact. При правильном заказе почти нет необходимости использовать реквизит exact для ограничения сопоставления маршрутов.
  2. Удалите вложенный BrowserRouter, отображаемый в компоненте App.

Код:

index.js

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

// mapping route
const routing = (
  <Router>
    <Switch>
      <Route path='/login' component = {Login} />
      <Route path='/register' component = {Register} />
      <Route path='/' component = {App} />
    </Switch>
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

App.js

import {
  Route,
  Switch,
  NavLink,
  Redirect,
  Link
} from 'react-router-dom';

const App = () => {
  return (
    <>
      <Wrapper>
        <div style = {{ fontSize: '10px' }}>
          <SidebarNav>
            <LogoIcon>
              <img src = {ImgLogo} alt = "Gambar Logo Siklus Care" />
            </LogoIcon>

            <SidebarWrap>
              <ul>
                <li>
                  <Link to = "/">Dashboard</Link>
                </li>
                <li>
                  <Link to = "/antrian-pasien">Antrian Pasien</Link>
                </li>
              </ul>
            </SidebarWrap>
          </SidebarNav>
        </div>
        <Switch>
          {routes
            .filter(({ sidebar }) => !!sidebar)
            .map((route, index) => (
              <Route
                key = {index}
                path = {route.path}
                exact = {route.exact}
              />
            ))
          }
        </Switch>
        <ContentWrapper>
          <Content>
            <NavigationBar />
            <Switch> 
              {routes
                .filter(({ main }) => !!main)
                .map((route, index) => (
                  <Route key = {index} path = {route.path} exact = {route.exact} children = {<route.main/>} />
                ))
              }    
            </Switch>     
          </Content>
        </ContentWrapper>
      </Wrapper>                           
    </>
  );
};

export default App;

Спасибо за подробное решение, мои проблемы расположены неправильно.

github.arief 24.11.2022 12:47

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