В настоящее время я работаю над веб-приложениями панели управления проектами reactjs. Я также использую реактивную маршрутизацию для навигации по контенту на веб-сайте.
У меня есть такое веб-приложение.
Когда я нажимаю «Панель инструментов» на боковой панели, содержимое отображается правильно. Также, когда я нажимаю «Antrian Pasien» на боковой панели.
Но когда я нажимаю «Ke Form» внутри контента или страницы «Antrian Pasien». он не отображает следующий компонент. [
я хочу изменить содержимое внутри страницы. не только в сайдбаре. вот моя версия из веб-приложения: реагировать : 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;
Я понятия не имею, любая помощь будет оценена. Спасибо.
App
отображается на точном пути "/"
, поэтому, когда путь URL отличается от "/"
, App
размонтируется, и любые дочерние маршруты не будут монтироваться для сопоставления.App
рендерит другой Router
, вложенный во внешний главный маршрутизатор. Это означает, что любые действия маршрутизации/навигации, которые обрабатываются внутренним вложенным маршрутизатором, не будут известны главному внешнему маршрутизатору. Для каждого приложения должен быть только один маршрутизатор, обеспечивающий контекст маршрутизации.Switch
в порядке, обратном специфичности пути, и удалите реквизит exact
. При правильном заказе почти нет необходимости использовать реквизит exact
для ограничения сопоставления маршрутов.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;
Спасибо за подробное решение, мои проблемы расположены неправильно.