Блог

Я создаю проект и сталкиваюсь с некоторыми проблемами в управлении маршрутами. Мой интерфейс разделен на две части. Один для клиентской стороны, а другой-это панель администратора для обработки клиентской стороны. Например, если я добавлю какой-нибудь блог из админ-панели, он отобразится на стороне клиента. Админ-панель предназначена для моей команды, чтобы управлять сайтом. Предположим, пользователи посетят мой веб-сайт по адресу «www.mywebsite.com» и я хочу этого, если войду «www.mywebsite.com/admin» тогда вместо Nav-компонентов должны открыться Админ-панель и Админ-компоненты. Как мне добиться этой условной маршрутизации?

Вот это App.js

 import React, { Component, useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";
import Landing from "./components/Landing";
import Home from "./components/Home";
import About from "./components/About";
import Teams from "./components/Team";
import Events from "./components/Events";
import NotFound from "./components/NotFound";
import Blog from "./components/Blog";
import ContactUs from "./components/Contact";
import ComingSoon from "./components/ComingSoon";
import Navbar from "./components/Navbar";
import EventInfo from "./components/EventInfo";
import AdminNavbar from "./admin-panel/AdmiNavbar";
import Login from "./admin-panel/Login";
import Eventadd from "./admin-panel/Eventadd";
import Blogadd from "./admin-panel/Blogadd";
import Dashboard from "./admin-panel/Dashboard";


const NavComponents = () => {
  
  return (
    <>
      <Switch>
        <Route path="/home" exact component={Home} />
        <Route path="/about" exact component={About} />
        <Route path="/events" exact component={Events} />
        <Route path="/team" exact component={Teams} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/contact" exact component={ContactUs} />
        <Route path="/comingsoon" exact component={ComingSoon} />
        <Route path="/eventinfo/:eventName" exact component={EventInfo} />
        <Route component={NotFound} />
      </Switch>
    </>
  );
};

const AdminPanel = () =>{

  return(
    <>
      <Switch>
        <Route path="/admin/Eventadd" exact component={Eventadd}/>
        <Route path="/admin/Blogadd" exact component={Blogadd}/>
        <Route path="/admin/DashBoard" exact component={Dashboard}/>
        <Route component={NotFound} />
      </Switch>
    </>
  );
};

class App extends Component {
  
  
  render() {
    
    return (
      <>
      {window.location.pathname=="/"?"": <Navbar />}
        <Switch>
          <Route path="/" exact component={Landing} />
          <NavComponents />
        </Switch>
      </>
    );
  }
}

export default App;
 

Я предполагаю, что если пользователи заходят на ваш сайт через «www.mywebsite.com/admin» ссылка, вы хотите перенаправить их на маршрут «/администратор/панель мониторинга»? Панель администратора не отображается, потому что она возвращает только маршрут с ТОЧНЫМ совпадением. Это возможно для

А) Добавьте дополнительный путь для обработки маршрутизации

<Route path=["/admin/DashBoard", "/admin"] exact component={Dashboard}/>

Б) Добавьте перенаправление для администратора, если вы предпочитаете сохранить маршрут как /администратор/панель мониторинга

<Redirect exact from="/admin" to={`/admin/dashboard`} />

Редактировать: (Самое главное)

Кроме того, я заметил, что вы не включили администратора в основной маршрутизатор. Вам не нужно отделять администратора от навигации. Предлагаю ознакомиться с документом https://reactrouter.com/web/api/Switch

Switch renders the first child <Route> or <Redirect> that matches the location.

В целом, это должно быть объединено следующим образом

 <Switch>
...user paths
...admin paths
</Switch>